Loading Please Wait...
CSS margin property sets transparent white space around the element.
margin: 10px;
margin: 5%;
margin: auto;
CSS margin property can have following values:
Keyword value: auto. The browser selects suitable value for the margin. In most cases it makes the element centered.
Length values: px, cm, rem, em, etc.
Percentage values: 5%, 10%, etc.
Zero value: 0px, 0%, 0. It is best practice not to use any length or percentage value when defining 0 margin.
Negative value: -10px, -5%, etc. Negative margin make the element closer to its previous element than normal (default).
Global value: inherit, initial, revert, revert-layer, unset.
Sets margin for all sides
margin: 10px;
First value sets margin of top-bottom and second value sets margin of left-right
margin: 10px 0.5rem;
First value sets margin of top, second value sets margin of left-right and third value sets margin of bottom
margin: 10px 0.5rem 5%;
First value sets margin of top, second value sets margin of right, third value sets margin of bottom, and forth value sets margin of left.
margin: 10px 0.5rem 5% auto;
/* Apply to all four sides */
margin: 1em;
margin: -3px;
/* top and bottom | left and right */
margin: 5% auto; /* horizontally centered */
/* top | left and right | bottom */
margin: 1em auto 2em;
/* top | right | bottom | left */
margin: 2px 1em 0 auto;
/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;
CSS provide margin-top, margin-right, margin-bottom, margin-left property to set margin of individual sides.
/* top margin */
margin-top: 10px;
/* right margin */
margin-right: 0;
/* bottom margin */
margin-bottom: 5%;
/* left margin */
margin-left: auto;
The top and bottom margin collapse (combine) into one margin. Normally collapsed margin selects the value of the larger margin or any value if they are equal.
Margin of adjacent sibling collapse except if the second element does not cleared the floats.
If there is not border, padding, height, min-height, etc. separation of the element, the margin will be collapse.
/* top = 10px right = 5px, bottom = 10px, left = 5px */
div{
margin: 10px 5px;
}
/*
When two adjacent div element draws
space between will be 20px
(bottom (10px) margin from first and top (10px) margin from second)
but margin collapse took place and make it 10px.
*/
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved