当前位置：首页 → 问答吧 → 宽度尺寸的一个问题

宽度尺寸的一个问题

时间：2011-06-27

来源：互联网

我是希望有个大div（class=area）。
这个area div中包含10*10个正方形分布的小div（class=block）。每行十个共十行

希望这10*10的正方形四周和大div是重合的，边界宽度是1px。
而每个小div的边界的宽度是0.5px。
即看上去效果就是一个边界1px的正方形，其中长宽各等分10分像个棋盘

我的css设定如下
JScript code


.area
{
    width: 506.5px;
    margin : 0px 6px 0px 6px;
    float: left;
    border-width: 0.75px;
    border-color: black;
    border-style: solid;

}

.block
{
    width: 50px;
    height: 50px;
    margin : 0;
    float: left;
    border-width: 0.25px;
    border-color: black;
    border-style: solid;
}

将block的边界宽设为0.25px，这样两个block的连接边界就是0.5，
而area的宽度设为0.75、与block的边界重合后就是1px。
那么area总的宽度我觉得就应该是506.5px。（每个block宽50px）

但实际上这个宽度小了。。。不解。。。
请教正确宽度应该是多少？
我哪步的思维错了？

作者: PIGer920 发布时间: 2011-06-27

子元素的宽度，margin,padding,border,width都算在内的

作者: aspwebchh 发布时间: 2011-06-27

引用 1 楼 aspwebchh 的回复:

子元素的宽度，margin,padding,border,width都算在内的

父元素的宽度是应该包括这些的
所以我觉得应该是506.5px margin,padding我都没有设置

作者: PIGer920 发布时间: 2011-06-27

应该是505 不应该算父div的border

作者: PIGer920 发布时间: 2011-06-27

border不算，MARGIN PADDING都算的吧。？

作者: tcwsyt 发布时间: 2011-06-27

引用 4 楼 tcwsyt 的回复:

border不算，MARGIN PADDING都算的吧。？

吧子div的border算进去还是小了
子元素的MARGIN PADDING都是0