CODEWITHSUNDEEP
cssborderpadding
John Smith
John Smith

Reputation: 8851

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?

Upvotes: 9

Views: 49761

Answers (3)

markt
markt

Reputation: 5156

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/

Upvotes: 17

Titus
Titus

Reputation: 4637

If that's the case, use this:

<div class="container">
    <div class="content">
        content here
    </div>
</div>

CSS code:

.container {    
    padding-left:200px;
}
.content {    
    width:500px;
    border-bottom: 1px dotted #999999;
}

Upvotes: 1

Trufa
Trufa

Reputation: 40747

Maybe like this, with margin-left

http://jsfiddle.net/ppMmy/

The CSS padding properties define the space between the element border and the element content.

Thus not "padding" the whole <div>

Upvotes: 0

Related Questions