Css 如何在不延长边界的情况下填充div？_Css_Border_Padding

Css 如何在不延长边界的情况下填充div？

css

Css 如何在不延长边界的情况下填充div？,css,border,padding,Css,Border,Padding,我有以下代码： <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> <

我有以下代码：

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


.集装箱{
边框底部：1px点#999999；
宽度：500px；
左侧填充：200px
}
asdf

它工作得很好，除了下边框也应用于缩进之前的200px。我希望底部边框从200px开始。可以这样做吗？

使用边距而不是填充，或者使用内部div。。（更新以符合评论中披露的要求）


.容器{
宽度：500px；
左侧填充：200px
}
.内部{
边框底部：1px点#999999；
}
asdf

它应该是这样的：

可能是这样，留有

空白

CSS填充属性定义了元素边框和元素内容

因此，不要“填充”整个

如果是这种情况，请使用以下方法：

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

或使用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>


.集装箱{
位置：相对位置；
宽度：500px；
左侧填充：200px
}
.货柜：之后{
内容：''；
宽度：计算（100%-200px）；
位置：绝对位置；
左：200px；
底部：0px；
边框底部：1px点黑色；
}
asdf

然后添加一个包含内容的子div，并在外部添加填充，或在内部添加边距。

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

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