Question

我有：

HTML

<div id="container"><div id="left"><div class="box">blahblah</div></div></div>

CSS

.box  {
    height: 200px;
    width: 300px;
    margin: 50px;
    background:url(box.png) no-repeat } 
#container{
    width:100%;
}
#left{
    float:left;
    width: 260px;
    height: 600px;
}

当我将margin: 25px;添加到.box类时，它会在页面上移动整个框div。我应该怎么做以保留div（.box）中的内容（blahblah）？

Answer 1

您必须考虑CSS使用“盒子模型”的事实

http://www.w3schools.com/css/css_boxmodel.asp

边距用于外部空间限制，而填充用于内部。

Answer 2

如果我理解了您的问题，那么您只需要寻找padding: 25px; - 这会在框<维>内增加空间或围绕内容框在边界边缘

这是一个简单的模型，可以帮助可视化盒子模型：

http://img199.imageshack.us/img199/4949/boxdim.png

查看CSS 2.1规范中的 Box Model 部分：http://www.w3.org/TR/CSS2/box.html了解更多信息

css div margin移动整个div而不是内容

2 个答案: