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

我有这样的代码：如何在不扩展边框的情况下填充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>

，它工作正常，除了一个事实，即缩进前底部边框也适用于200像素。我希望底部边框以200px开始。这可以做到吗？

来源

2011-03-13 John Smith

使用的保证金，而不是填充或使用内部的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/

来源

2011-03-13 01:48:40 markt

你打我吧。 –

然后添加一个具有内容的子div，并向外部添加填充或向内部添加填充。 – markt

这件作品谢谢！ –

也许像这样，用margin-left

http://jsfiddle.net/ppMmy/

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

因此没有 “填充” 整个<div>

来源

2011-03-13 01:49:46 Trufa

如果是这样的情况下，使用此：

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

CSS代码：

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

来源

2011-03-13 01:56:39 Titus

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

回答

相关问题