The margin property defines the space around an HTML element. The values of the margin property are not inherited by the child elements. With stylet we can add "margin top", "margin bottom", "margin-right", "margin left" and the short hand property "margin"
You can use the margin to space within HTML element. For example if two buttons are too close, we can add margin to them to space them apart, margins are very useful.
Margin
The "margin" allow us to set all properties for the four sides in one declaration.
<div class="orange-bg">
hello, i don't have a margin added to me.
</div>
<div class="orange-bg mar-4">
Hello i have a margin of stylet standard 4
</div>
We added "margin" to the second div tag. In stylet we add margin using the class syntax mar-{num} where num is less than 26.
Margin top
The "margin top" allow us to specify the top margin of an element.
<div class="orange-bg mar-top-4">
Hello i have a margin top of stylet standard 4
</div>
We added "margin top" to the div tag. In stylet we add margin to the top using the class syntax mar-top-{num} where num is less than 26.
Margin bottom
The "margin bottom" allow us to specify the bottom margin of an element.
<div class="orange-bg mar-btm-4">
Hello i have a margin bottom of stylet standard 4
</div>
We added "margin bottom" to the div tag. In stylet we add margin to the bottom using the class syntax mar-btm-{num} where num is less than 26.
Margin right
The "margin right" allow us to specify the right margin of an element.
<div class="orange-bg mar-right-4">
Hello i have a margin right of stylet standard 4
</div>
We added "margin right" to the div tag. In stylet we add margin to the right using the class syntax mar-right-{num} where num is less than 26.
Margin left
The "margin left" allow us to specify the left margin of an element.
<div class="orange-bg mar-left-4">
Hello i have a margin left of stylet standard 4
</div>
We added "margin left" to the div tag. In stylet we add margin to the left using the class syntax mar-left-{num} where num is less than 26.