当前位置：首页 → 问答吧 → padding属性设置完以后，显示不为设定的值！

padding属性设置完以后，显示不为设定的值！

时间：2011-09-02

来源：互联网

padding设置的是3px;

导航菜单使用的是 width:100%;
顶部右侧菜单使用的是 float:right;

float:right;可以正常显示右侧的三个像素的padding
而用width:100%;则只有个1px的缝隙！
为什么呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>贵美首页</title> <style type="text/css"> #root{ width:980px; height:800px; margin:0px auto 35px auto; } #heander{ width:974px; height:150px; border:thin solid #F00; margin:0 auto; padding:3px; } #main{ width:100%; height:550px; border:thin solid #F00; margin:auto auto; padding:0; } #footer{ width:100%; height:100px; border:thin solid #F00; margin:0 auto; } .cat{ width:20%; height:100%; float:left; } .sidebar{ width:20%; height:100%; float:left;} .content{ width:60%; height:100%; float:left; } .headerlogo{ height:80%; width:300px; border:thin solid #000; float:left; } .headertopmenu{ height:20px; width:500px; border:thin solid #000; float:right; } .headermenu{ width:100%; height:18%; border:thin solid #000; float:left; } .headerhello{ width:500px; height:30px; border:thin solid #000; float:right; margin-top:30px; margin-right:80px; } </style> </head> <body> <div id="root"> <div id="heander"> <div class="headerlogo">logo</div> <div class="headertopmenu">顶部右侧菜单</div> <div class="headerhello">你好，欢迎登陆！</div> <div class="headermenu">导航菜单</div> </div> <div id="main"> <div class="cat">商品列表</div> <div class="content">内容</div> <div class="sidebar">右侧列表</div> </div> <div id="footer">底部</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: lyzssg120 发布时间: 2011-09-02

标准盒模型中，宽高代表可容内容的大小，padding、margin、border都不算在宽高中，都是在宽高的基础上来增加相应的像素值。

所以在设置div的宽高时要考虑上以上三个元素的值来计算！

所以上面的原因出在，导航菜单使用的是100%宽度，所以会取的上一层DIV的内容宽度来做自己的宽度。
但border占了两个像素，所以………………

自己的问题，自己解答。。。

作者: lyzssg120 发布时间: 2011-09-02

padding属性设置完以后，显示不为设定的值！

热门阅读

热门下载