John Smith John Smith - 1 year ago 52
CSS Question

How to pad a div without extending the border?

I have this code:

<html>
<head>
<style type="text/css">
.container {
border-bottom: 1px dotted #999999;
width:500px;
padding-left:200px
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>


And it works fine except for the fact that the bottom border is also applied to the 200px before the indent. I want the bottom border to start at 200px. Can this be done?

Answer Source

Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)

<html>
<head>
    <style type="text/css">
        .container {            
            width:500px;
            padding-left:200px
        }
        .inner{
            border-bottom: 1px dotted #999999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">
            asdf</div>
    </div>
</body>

This is what it should look like: http://jsfiddle.net/dKVTb/1/