响应设计中CSS填充的故障排除
这个简单的HTML5布局的目的是在左边有一个导航条，正文文本在它旁边浮动(使用百分比而不是像素来表示流畅、响应性的设计--计算在CSS中的注释中)。
http://www.wturrell.co.uk/stackoverflow/20110615-01.html
“页面”div中元素的宽度加起来完全是100%。我想在某些元素中添加填充，在这个例子中，是导航。如果我删除所有的填充，它们会正确浮动，但超过1或2个像素的填充(不管它是在什么单位指定)，并打破。我不明白为什么这是打破布局，因为它是填充，所以肯定不应该改变整个区块的大小？
我错过了什么？
更新-解决方案： http://www.wturrell.co.uk/stackoverflow/20110615-02.html
(元素显示宽度=宽度加上边框加上填充。导航应标称为200像素，右侧为20 20填充，因此对于流体设计，宽度= 180/900*100或20%，填充= 20/900*100或2.222%，正文文本保持700/900*100或77.777%。
回答 4
Stack Overflow用户
发布于 2011-06-15 12:14:30
在中，padding被添加到width中，以获得盒子的总体大小。在您的情况下，如果宽度百分比加起来达到100%，即使是1 1px也意味着内容溢出。
尝试将填充设置为百分比，并在添加它们时考虑到这一点，或者在边缘留下1%或2%的缓冲区，然后添加以像素为单位的小填充。
Stack Overflow用户
发布于 2011-06-15 12:30:40
首先，您需要添加一个doctype来触发标准模式。否则，您的页面将使用Quirks Mode，这将在特别是Internet中造成可怕的问题。
添加如下第一行：
<!DOCTYPE html>接下来，@Alex对盒子模型的回答是正确的(padding不被认为是width的一部分)。您可以将width精确地减少padding的数量，或者：
使用box-sizing: border-box：https://developer.mozilla.org/en/CSS/box-sizing
您可以将它添加到希望padding包含在width计算中的任何元素中。
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;有关此问题的更多详细信息，请参见：http://css-tricks.com/box-sizing/
浏览器对这个属性的支持是很好的：http://caniuse.com/css3-boxsizing -到处都是IE6/7。
Stack Overflow用户
发布于 2011-06-15 12:24:47
@williant；Alex是对的，padding & border将width添加到元素中。因此，根据width调整padding。
css:
#page nav {
clear: both;
display: inline;
float: left;
padding: 0 10% 0 0;
width: 12.2222%;
}https://stackoverflow.com/questions/6357437
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号