CSS Margins

CSS margin refers to adding extra space around an HTML element. Margins are typically used to provide space around an element or to separate it from other elements. With CSS margin, you can create gaps between elements and position them as desired.

The margin property is used to define the margin. You can set margins separately for top, bottom, right, and left, or you can set the margin for all sides at once. For example, if you want to add a 10-pixel margin above, you can write the following rule:

margin-top: 10px;

You can also set the margin on all sides at once using the following rule:

margin: 10px;

It is important to consider the use of CSS margins when designing a website, as a margin that is too large can make the page narrow and unpleasant to view, while a margin that is too small can make the page unclear and difficult to read.

In addition to CSS margin, you can also use the padding property discussed in the previous module to define the inner space of an element. Padding is typically used to allocate space for the content of an element, whereas margin is used to allocate space around an element.

Practice