The margin is the blank space around an element provided to position the element comfortably. The additional space added, does not have any background color, it is completely transparent.
You can set a margin around an element by using the margin property.
Syntax:
margin: value in px, em or % | inheritWhere margin value is either a length, percentage value, auto, or inherit from the parent element.
Here is a video to explain all about margin property.
Video Transcript:
If two values are provided in the margin property, the first will set the top and bottom margins and the second value applies to the right and left margins. Similarly, if three values are provided to the margin shorthand, the first applies to the top margin, second to the right and left margins, while the third value applies to the bottom margin. Notice how the unspecified margin is inferred from the value defined for its opposite side. If you wish to set the values for all four sides, you can set them in this order: top, right, bottom, left.
This is illustrated in the following example:
Elements may have default margins on them and these values may vary. If you want to reset all margins to zero and then add your own margins, you can use a wildcard rule like *{ margin: 0; } to clear all margins. Also note than margin values can be negative.
This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,
So, that's all about margins. This was pretty easy, right? Let’s move ahead to positioning elements.