如何在不扩展边框的情况下填充 div？
Posted
技术标签:
【中文标题】如何在不扩展边框的情况下填充 div？【英文标题】：How to pad a div without extending the border? 【发布时间】：2011-07-14 07:10:09 【问题描述】：我有这个代码：
<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>
除了底部边框也适用于缩进前的 200px 之外，它工作正常。我希望底部边框从 200px 开始。这个可以吗？
【问题讨论】：
【参考方案1】：使用边距代替填充或使用内部 div..（已更新以匹配 cmets 中披露的要求）
<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/
【讨论】：
然后添加一个包含内容的子 div 并在外部添加填充或向内部添加边距。【参考方案2】：或者用 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>
fiddle
【讨论】：
【参考方案3】：如果是这样，请使用：
<div class="container">
<div class="content">
content here
</div>
</div>
CSS 代码：
.container
padding-left:200px;
.content
width:500px;
border-bottom: 1px dotted #999999;
【讨论】：
【参考方案4】：可能是这样，margin-left
http://jsfiddle.net/ppMmy/
CSS 填充属性定义 元素边框和 元素内容。
因此不是“填充”整个<div>
【讨论】：
以上是关于如何在不扩展边框的情况下填充 div？的主要内容，如果未能解决你的问题，请参考以下文章
Flexbox：如何让 div 在不换行的情况下填充 100% 的容器宽度？
如何在不更改 javafx 边框的情况下更改 TextField 的背景颜色？
如何在不使用边框间距和空行的情况下在带有边框的表格行之间添加空格