Question

我在css里设置div width=100%，padding=10px，为何会出现横向滚动条？但去掉padding就好了

如题，在div的右侧多出了一段，放大缩小窗口都没用，下方出现滚动条，但去除padding属性后这种情况消失
源代码：
----------------
.title
{
width:100%;
height:60px;
background-color:#3E3E3F;
padding:10px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin:0 auto;
}
------------------
截图：
title右侧多出一块，应该是多了20px

下面多了滚动条





Answer 1

首先，宽度超出最外层的框架或元素的宽度，才会出现横向滚动条；

那么，你只需要保证你内部的元素宽度不要超出外层宽度即可；

然后是，padding的设置，padding的作用 是 在当前宽度的情况下 去 追加 padding的像素值。

希望对你有所帮助；

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。网页链接

Answer 2

为什么会多出20个像素 padding:10px; 等于padding:10px 10px 10px 10px; 分别对应上 右 下左，padding的作用 是 在当前宽度的情况下 去 追加 padding的像素值。也就是说 你的宽度100%，再加上padding:10px; 他的实际宽度就是 100%+20px; 希望对你有帮助 不懂的地方可以 追问

Answer 3

如果你的顶部不放其他浮动float元素的话就写一个padding10就行了，不用写100%，如果您想padding 10又想用100%的属性的话，建议你在title里再插入一个标签在定义这个标签padding-left 10然后去掉titile的padding 10属性就可以了，为了有更多的扩充机会，建议你不要在外围的div 100% 属性下去去写左右内边距。一定要写就在里面元素里写。

Answer 4

padding会被计算为宽度的，所以想要控制内部间距，最好不要设置外部div的宽度。

div默认是块级的，默认就是100%宽度，再设置padding，实际效果的宽度会自适应的调整为100%。

所以在 width = 100%时不需要写这个属性，在固定宽度时再写。

Answer 5

再加个属性box-sizing:border-box就可以了