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

In this article, the editor introduces in detail "how to use padding in CSS". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use padding in CSS" can help you solve your doubts.

Detailed explanation of the usage of CSS padding

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

The Padding attribute contains paddingleft: left offset distance (set distance from left inner margin); paddingtop: top offset distance (set top margin); paddingright: right offset distance (set right inside margin); paddingbottom: bottom complement distance (set low inside margin).

Anatomical diagram of padding

Paddingleft 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)

Paddingright 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).

Paddingtop 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)

Paddingbottom 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.

◆ can be abbreviated as follows:

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:5px10px; means the distance between the upper and lower patches is 5px, and the distance between the left and right patches is 10px, which is equal to the abbreviation of padding-top:5px;padding-bottom:5px;padding-left:10px;padding-right:10px;.

In the sense of padding:5px6px7px;, the patch distance is 5px, the next patch distance is 7PX, and the left and right patch distance is 6px, which is the same as padding-top:5px;padding-bottom:7px;padding-left:6px;padding-right:6px;.

In the sense of padding:5px6px7px8px;, the patch is 5px, the left 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:5px6px7px8px; is clockwise, that is, the figure:

Attribute Transformation Diagram of padding

After reading this, the article "how to use padding in CSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.