CSS DIV缘移动，而不是内容

Question

整个DIV我有：

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

如果我理解你的问题你只是在寻找替代padding: 25px; - 这增加了空间内箱的尺寸或周围内容框和边框边缘

这里是内一个简单的模型，以帮助形象化的盒模型：

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

看一看在CSS 2.1规格的盒型号部分：http://www.w3.org/TR/CSS2/box.html了解更多

Answer 2

你必须考虑到CSS使用而填充用于内部一个“盒子模型”

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

利润率外部空间限制的事实。