What is the inner margin:
The inner margin is outside the text (content) and inside the border (border). The simplest property to control this area is the padding property. The padding attribute defines the white space between the element's border and its content.
The CSS padding property defines the padding of an element. The padding attribute accepts a length value or a percentage value, but does not allow negative values.
You can set uniform padding, or you can set unilateral padding: For example, if you want all h1 elements to have 10 pixels of padding on each side, just do this :
h1 {padding: 10px;}You can also set the padding on each side in the order of top, right, bottom, and left. Each side can use different units or percentage values:
h1 {padding: 10px 0.25em 2ex 20%;}If If we only want to set the data on a certain side, we can only do it through the following four attributes:
padding-top
padding-right
padding-bottom
padding-left
As the name suggests, this is easy to understand.
In the setting of numerical values, as we mentioned before, you can use a variety of units, the commonly used ones are pixels (px) and centimeters (cm). This is relatively simple, just test it simply:
Write a table in the html file and add the border attribute:
<table border="1"> <tr> <td> 正文 </td> </tr> </table>
This is the page before it is set:
Let’s add
h1 {
padding-left: 5cm;
padding-right: 5cm;
padding-top: 30px;
padding-bottom: 30px;
}to the CSS file and update the HTML code to:
<table border="1"> <tr> <td> <h1>正文</h1> </td> </tr> </table>
The following is a screenshot of the effect:
We can see that the area we operate is outside the text and within the border.
