Adjust the distance between the text and the border in the DIV block

 If you like to use DIV blocks for web page layout, there will always be some DIV blocks used to put text content. The distance between the default DIV block text content and the border is usually glued together, causing visual Uncomfortable, web designers usually use the padding property of CSS to adjust the distance between the text in the DIV block and the border, which is commonly known as the inner margin. Through the adjustment of the inner margin, the text in our web page and the DIV block border are adjusted can pull out a gap, look more comfortable, let's take a look at the CSS of padding attribute basic grammar, and then applied to the sample seen tangible results. CSS padding property syntax

padding: inner distance;

The padding parameter can be expressed in the form of "number + unit", or expressed as a percentage. It is even possible to design the padding we want based on four different sides. The function is fairly simple and powerful, please refer to " "CSS padding padding properties and usage examples " has a more detailed usage introduction.

Practical example of adjusting the distance between the text and the border in the DIV block

<div style="border:1px blue solid; padding:0px; ">
This is the text in the DIV block, and the padding is set to 0px.
</div>
<div style="border:1px blue solid; padding:10px; ">
This is the text in the DIV block, and the padding is set to 10px.
</div>
<div style="border:1px blue solid; padding:20px; ">
This is the text in the DIV block, and the padding is set to 20px.
</div>

Effect of the example

This is the text in the DIV block, and the padding is set to 0px.

This is the text in the DIV block, and the padding is set to 10px.

This is the text in the DIV block, and the padding is set to 20px.

In order to be able to show the padding effect created by padding more clearly , we have prepared three different DIV blocks and set the padding to 0px, 10px and 20px. You can clearly see the three blue colors. There is a distance between the text in the DIV block of the border and the border of the DIV block . The larger the padding is, the greater the distance between the text and the border. This is the basic effect of the padding property. In addition, the border in the example is used for design For the properties used for the border of the DIV block , you can refer to the introduction of " CSS border ".