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

This article mainly explains "how to set the inner margin in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to set the inner margin in CSS".

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.

The CSS padding attribute defines the white space between the element border and the element content.

CSS padding attribute

The CSS padding attribute defines the CSS 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:10px0.25em2ex20%;}

Unilateral CSS inside margin attribut

Also set the top, right, bottom, and left CSS 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.25em; padding-bottom:2ex; padding-left:20%;}

Percentage value of CSS 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 CSS 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.

ThisparagraghiscontainedwithinaDIVthathasawidthof200pixels.

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.

Thank you for your reading, the above is the content of "how to set the inner margin in CSS". After the study of this article, I believe you have a deeper understanding of how to set the inner margin in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.