Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the padding attribute in CSS. It is very detailed and has a certain reference value. Friends who are interested must finish it!

CSS inside margin

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.

CSS padding attribute

The CSS padding attribute defines the white space (inner margin) between the element border and the element content.

The CSS 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, and each side can use different units:

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

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.

This is the same as 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 the div element, then its inner margin is calculated according to the width of the div.

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

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

All inner margin properties are in one declaration

Td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm} each edge of the table cell has an equal inner margin, which is 1.5cm. The upper and lower inner margin of this table cell is 0.5cm, and the left and right inner margin is 2.5cm.

Note: use the shorthand property to set all the inner margins properties in a declaration, which can have one to four values.

CSS Inner margin attribute and description

Padding: abbreviated attribute. The function is to set the inner margin attribute of the element in a declaration.

Padding-bottom: sets the bottom inner margin of the element.

Padding-left: sets the left inner margin of the element.

Padding-right: sets the right inner margin of the element.

Padding-top: sets the upper inner margin of the element.

The above is all the content of the article "how to use padding attributes in CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.