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

This article mainly introduces the relevant knowledge of "how to use the padding attribute of css". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to use the padding attribute of css" can help you solve the problem.

The padding property is an abbreviated property that css uses to set all padding properties in one declaration.

The Padding property contains padding left: left offset distance (set to the left inner margin); padding top: top offset distance (set to the top inside margin); padding right: right offset distance (set to the right inside margin); and padding bottom: bottom offset distance (set to the low inside margin). The two-dimensional construction diagram can be seen in the CSS attribute two-dimensional diagram.

Anatomical diagram of padding

Padding left usage: padding-left:10px; means a margin of 10 pixels on the left, such as a percentage (10% of the padding-left:10%; distance on the left)

Padding right usage: padding-right:10px; means a margin of 10 pixels on the right, for example (10% of the distance between padding-right:10%; and the right).

Padding top usage: padding-top:10px; means a distance of 10 pixels from the top edge, such as a percentage (padding-top:10%; is 10% distance from the top edge)

Padding bottom usage: padding-bottom:10px; means 10 pixels from the low margin, such as a percentage (padding-bottom:10%; is 10% distance from the bottom edge).

Notice the "-" sign in the middle of the padding, set the distance value with ":" and give it a value, and end with ";", all in lowercase half-width letters.

If you need to set the value of padding from left to right, you can do it in shorthand to optimize css.

For example, the abbreviations are:

Padding:10px; means that the patch distance from top to bottom means that 10px (10 pixels) is the same as padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px;.

Padding:5px 10px; the distance between the upper and lower patches is 5px, and the distance between the left and right patches is 10px, which is equivalent to the abbreviation of padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px;.

Padding:5px 6px 7px; in meaning, the patch distance is 5px, the next patch distance is 7PX, and the left and right patch distance is 6px, which is equivalent to the abbreviation of padding-top:5px; padding-bottom:7px; padding-left:6px; padding-right:6px;.

Padding:5px 6px 7px 8px; in meaning, the patch is 5px, the right patch distance is 6px, the next patch distance is 7px, and the left patch distance is 8px, which is equal to the abbreviation of padding-top:5px; padding-right:6px; padding-bottom:7px; padding-right:8px;.

The conversion method of padding:5px 6px 7px 8px; is clockwise:

Attribute Transformation Diagram of padding

The above is the attributes and usage of padding summarized by the div+css website. The use of margin is the same as padding.

This is the end of the content about "how to use the padding attribute of css". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.