John Smith John Smith - 4 months ago 10
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

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/