Get the App
SLTechnology News&Howtos  ›  Development  › 

How to define the outer margin of CSS

Shulou Source: shulou.com Published: 2022-06-01 06:48:28 10月24日 Update

This article mainly shows you "how to define the CSS margin", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to define the CSS margin" this article.

The white space around the element border is the outer margin. Setting the margin creates additional "white space" outside the element.

The easiest way to set the margin is to use the margin property, which accepts any unit of length, percentage, or even negative value.

CSSmargin attribute

The easiest way to set the margin is to use the margin property.

The margin property accepts any unit of length, which can be pixels, inches, millimeters, or em.

Margin can be set to auto. A more common practice is to set the length value for the outer margin. The following declaration sets a 4-inch wide white space of 1 inch on each side of the H2 element:

H2 {margin:0.25in;}

The following example defines different outer margins for the four sides of the H2 element, using px units:

H2 {margin:10px0px15px5px;}

As with the inner margin setting, the order of these values is to rotate clockwise around the element starting with the top and outer margin (top):

Margin:top-right-bottom-left

Alternatively, you can set a percentage value for margin:

P {margin:10%;}

The percentage is calculated relative to the width of the parent element. In the above example, the outer margin set for the p element is 10% of the width of its parent element.

The default value for margin is 0, so if you don't declare a value for margin, there will be no margins.

In practice, however, browsers already provide predetermined styles for many elements, and outmargins are no exception.

For example, in browsers that support CSS, margins generate "blank lines" above and below each paragraph element.

Therefore, if the outer margin is not declared for the p element, the browser may apply an outer margin on its own. Of course, as long as you make a special declaration, the default style will be overwritten.

The above is all the contents of the article "how to define CSS margins". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Tags: Elements attributes length content units browsers percentages blanks articles browsing examples pixels that is values methods styles facets learning help different Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Information Microsoft macOS Linux vpn