CSS 如何在不扩展边框的情况下填充 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5286863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pad a div without extending the border?
提问by John Smith
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?
除了底部边框也应用于缩进之前的 200px 之外，它工作正常。我希望底部边框从 200px 开始。这能做到吗？
回答by markt
Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)
使用边距而不是填充或使用内部 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>
This is what it should look like: http://jsfiddle.net/dKVTb/1/
它应该是这样的：http: //jsfiddle.net/dKVTb/1/
回答by Larmia
Or with calc
或者用计算
<html>
<head>
<style type="text/css">
.container {
position: relative;
width:500px;
padding-left:200px
}
.container:after {
content: '';
width: calc(100% - 200px);
position: absolute;
left: 200px;
bottom: 0px;
border-bottom: 1px dotted black;
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>
回答by Titus
If that's the case, use this:
如果是这种情况，请使用以下命令：
<div class="container">
<div class="content">
content here
</div>
</div>
CSS code:
CSS代码：
.container {
padding-left:200px;
}
.content {
width:500px;
border-bottom: 1px dotted #999999;
}
回答by Trufa
Maybe like this, with margin-left
也许像这样，与 margin-left
The CSS padding properties define the space between the element border and the element content.
CSS padding 属性定义了元素边框和元素内容之间的空间。
Thus not "padding" the whole <div>
因此不是“填充”整个 <div>
