Padding increasing the total size of a box element
Is this the correct behavior for padding to increase the total size of a box element ? I'm trying to set padding to the left side of a box element which has the width set to 940px but when I add 25px in padding to the left side it adds these pixels to the width of the box element making it overlap the body-wrapper which is the parent element.
I also tried marging-left but while this doesn't add to the total width of my box element it pushes it to the right causing it to overlap as well..
What is the best way to dealing with this issue?
Please check screenshot for a visual:
It is the default behaviour of the box model. You can learn more about the box model here.
In your CSS you can define the behaviour with the box-sizing attribute. In this case you'll want:
box-sizing:border-box;
border-box takes the padding and border sizes into account when setting the width of the element, which is what you're looking for. However, it will not calculate based on margin sizes.
上一篇: 边框中的CSS百分比填充/边距
下一篇: 填充增加了一个盒子元素的总大小