CSS padding properties and usage examples

 Through the setting of CSS padding, you can control the inner distance of areas such as DIV or span , as well as the inner distance of HTML tables (such as the distance between text or pictures and the border). The padding itself is the setting of the inner distance, and padding is not allowed Set a negative value! This is different from margin .

CSS padding basic syntax example

padding: top right, bottom left; padding: top, bottom, left, 　and right; 　padding: top, left, right, bottom; 　padding: the same value on all four sides;

In the first example, we gave four values, namely, the upper inner margin, the right inner margin, the lower inner margin, and the left inner margin. Each value must be separated by a half-shaped blank. In the second example, we only wrote two The values ​​are the upper and lower inner margins (the same value) and the left and right inner margins (the same value). In the third example, we gave three values, namely the upper inner margin, the left and right inner margins, and the lower inner margin. The distances will be the same. The fourth example is a simplified way of writing, with the same inner distances on all four sides.

CSS padding practical example

<div style="width:120px;height:120px;background-color:#D4E6F8; padding:15px 20px; ">
　<div style="background-color:#FFC991;width:120px;height:120px;">< /div>
</div>

This writing means that the upper and lower inner margins are both 15px and the left and right inner margins are both 20px. The results are as follows

The focus of the example lies in the " padding: 15px 20px; " part. Set the padding of two DIV blocks. The blue DIV block has an orange block inside. The upper and lower padding is the same through the padding setting, and the left and right padding is the same. Similarly, the background-color in the example is the background color, and width and height are the width and height of the DIV block.

Independent writing of the four sides of CSS padding

• padding-top: the top padding
• padding-right: padding on the right
• padding-bottom: the padding below
• padding-left: the padding on the left

The attributes of the above four edges can be used alone or mixed.

possible padding

• padding:auto; //It means let the browser set it by itself.
• padding: length unit; //is for numbers and units, the unit can be em, px, pt, etc.
• padding:%; //Let the browser set by itself, which is related to border elements.