How to define CSS margins

The white space surrounding the border of an element is margin. Setting margins creates additional "white space" outside the element.

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

CSS margin attribute                                                                                                                                                                                                                                                                                          .

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

margin can be set to auto. A more common approach is to set a length value for the margins. The following declaration sets 1/4-inch-wide margins on each side of the h1 element:

h1 {margin : 0.25in;}

The following example defines different margins for the four sides of the h1 element, using the length units It is pixels (px):

h1 {margin : 10px 0px 15px 5px;}

Same as the setting of the padding. The order of these values ​​​​is starting from the top margin (top) and rotating clockwise around the element:

margin: top right bottom left

In addition , you can also set a percentage value for margin:

p {margin : 10%;}

The percentage is calculated relative to the width of the parent element. The example above sets the margins for the p element to 10% of the width of its parent element.

The default value of margin is 0, so if a value is not declared for margin, no margin will appear.

However, in practice, browsers already provide predetermined styles for many elements, and margins are no exception.

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

Therefore, if no margin is declared for the p element, the browser may apply one on its own. Of course, as long as you specifically declare it, the default style will be overridden.

The above is the detailed content of How to define CSS margins. For more information, please follow other related articles on the PHP Chinese website!