Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to use the padding attribute in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

CSS padding attribute

The inner margin of the element is between the border and the content area. The easiest property to control this area is the padding property. The CSS padding attribute defines the white space between the element border and the element content.

Introduction to CSS padding attributes

The CSS padding attribute defines the inner margin of the element. The padding property accepts a length or percentage value, but negative values are not allowed.

For example, if you want all H2 elements to have a 10-pixel inner margin on each side, just do this:

H2 {padding: 10px;} you can also set the inner margins of each side in the order of top, right, bottom, and left, each side can use different units or percentage values:

H2 {padding: 10px 0.25em 2ex 20%;}

Unilateral inside margin attribut

Also set the top, right, bottom, and left inner margins by using the following four separate properties:

Padding-top padding-right padding-bottom padding-left

As you may have thought, the following rules have exactly the same effect as the abbreviated rules above:

H2 {padding-top: 10px; padding-right: 0.25mm; padding-bottom: 2ex; padding-left: 20%;}

Percentage value of the inner margin

As mentioned earlier, you can set a percentage value for the inner margin of an element. The percentage value is calculated relative to the width of its parent element, just like the outer margin. So, if the width of the parent element changes, they will also change.

The following rule sets the inner margin of a paragraph to 10% of the parent element width:

P {padding: 10%;} for example: if the parent element of a paragraph is a div element, then its inner margin is calculated according to the width of div.

This paragragh is contained within a DIV that has a width of 200 pixels.

Note: the upper and lower inner margin is the same as the left and right inner margin; that is, the percentage of the upper and lower inner margin is set relative to the width of the parent element, not to the height.

CSS inside margin attribute

These are all the contents of the article "how to use the padding attribute in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.