如何在不扩展边框的情况下填充div？

Question

如何在不扩展边框的情况下填充div？

9

我有这段代码：

<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>

除了底部边框也应用于缩进前的200像素这一事实外，它工作得很好。我希望底部边框从200像素处开始。这可以做到吗？

- John Smith

3个回答

1

如果是这种情况，使用这个：

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

CSS 代码：

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

- Titus

0

也许可以这样，使用margin-left。

http://jsfiddle.net/ppMmy/

CSS的padding属性定义了元素边框和元素内容之间的空间。

因此不会“填充”整个

。

- Trufa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markt · Accepted Answer

使用外边距（margin）而不是内边距（padding），或者使用内部div。（已更新以匹配评论中披露的要求）

<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>

这就是它应该看起来的样子：http://jsfiddle.net/dKVTb/1/