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

【问题标题】：How to pad a div without extending the border?如何在不扩展边框的情况下填充 div？
【发布时间】：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 开始。这个可以吗？

【问题讨论】：

标签： css border padding

【解决方案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>

【讨论】：