👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!
Adding spaces between elements of a web page is a crucial part of designing user experiences that are both aesthetic and functional. Margins are used to create a blank area around an HTML element to separate the element from other objects on the web page.
The CSS margin property and its four sub-properties are used to define a margin around an element in HTML.
This tutorial will explain, with references and examples, how to use the margin property and its sub-properties to create a margin around an element in CSS. By the end of this tutorial, you will have a good understanding of applying a margin to a web element using CSS.
CSS Margin
The CSS Margin property is used to create a space around an element. This space allows you to easily separate multiple elements on a web page, apart from any border.
In CSS, the margin property is shorthand for four sub-properties. These sub-properties are used to set the top, right, bottom, and left margins of a web item.
Each element of a web page consists of one or more panes. The elements use the box template to delimit how the box is displayed on the web page.
Margins are one of the main components of the box model and exist at the outermost level of the box model. In the graphic below, you can see that margins are applied outside the borders in an HTML element:
this tutorial, we & rsquo; We will focus on property margin. If you want to know more about the various components of the box model, you can read our articles on borders and CSS filling.