How to express padding and margins in css

Padding and margins are properties in CSS used to control the white space around elements. The inner margin sets the space between the element content and the element border, set through the padding attribute; the outer margin sets the space between the element border and adjacent elements, set through the margin attribute.

The representation of padding and margins in CSS

The representation of padding and margins in CSS Property used to set the white space around an element. They play a vital role in defining the layout of elements and user interface design.

Padding

Padding refers to the space between the content of the element and the border of the element. It can be set via the padding attribute, and its value can be a single value (representing the same distance for all margins) or four values ​​(representing the top, right, bottom, and left margin distances respectively).

Syntax:

<code>padding: <top> <right> <bottom> <left>;</left></bottom></right></top></code>

Example:

<code>div {
  padding: 10px;
}</code>

This example will set a 10 pixel padding for a div element, That is, the element content is kept 10 pixels away from the element border on all margins.

Margin

Margin refers to the space between the element's border and adjacent elements (or viewports). It can be set via the margin attribute, and its value follows similar rules to padding.

Syntax:

<code>margin: <top> <right> <bottom> <left>;</left></bottom></right></top></code>

Example:

<code>div {
  margin: 20px;
}</code>

This example will set a margin of 20 pixels for the div element, that is Element borders are 20 pixels apart from adjacent elements on all margins.

The above is the detailed content of How to express padding and margins in css. For more information, please follow other related articles on the PHP Chinese website!