When we set the width of the block element to 100%, and then set the padding value to make the content inside have a certain padding, we will find that the effect of the padding is achieved at this time, but a horizontal scroll bar appears.
Reason: padding is the gap between the border and the content inside. If you set padding, the value of padding will remain unchanged. When the content + padding is larger than the container, it will be centered on the upper left corner of the container, keeping the distance of the padding. External expansion, so a scroll bar appears. The normal solution is to subtract 2 times the padding value from the element width, but now the element width value is not a specific px value, but a percentage.
There are two solutions in this case:
1. The easiest way is to remove the element width value setting,width:100%, the default width of block-level elements is 100%. After setting padding, the padding will be calculated as the width, and the width of the actual effect will be adaptively adjusted to 100%.
2. Use the new features of css3 to set box-sizing: border-box to the parent; at this time, any padding and border specified by the element will be drawn within the set width and height, the width and height set by the element The border and padding are automatically subtracted to get the width and height of the content.