- 0 set margin to none
- auto used for centering, by evenly setting values on each side
- units (e.g. px) see parameter section in Units for a list of valid units
- inherit - inherit margin value from the parent element
- initial restore to the initial value
When two margins are touching each other vertically, they are collapsed. When two margins touch horizontally, they do not collapse.
Example of adjacent vertical margins:
Consider the following styles and markup:
They will be 10px apart since vertical margins collapse over one and other. (The spacing will not be the sum of two margins.)
Example of adjacent horizontal margins:
Consider the following styles and markup:
They will be 20px apart since horizontal margins don't collapse over one and other. (The spacing will be the sum of two margins.)
Overlapping with different sizes
These elements will be spaced 15px apart vertically. The margins overlap as much as they can, but the larger margin will determine the spacing between the elements.
Overlapping margin gotcha
Now, what about if we add some borders to the markup above.
Collapsing Margins Between Parent and Child Elements:
In the example above, only the largest margin applies. You may have expected that the paragraph would be located 60px from the h1 (since the div element has a margin-top of 40px and the p has a 20px margin-top). This does not happen because the margins collapse together to form one margin.
Apply Margin on a Given Side
CSS allows you to specify a given side to apply margin to. The four properties provided for this purpose are:
The following code would apply a margin of 30 pixels to the left side of the selected div. View Result
- margin-left The direction in which the margin should be applied.
- 30px The width of the margin.
Specifying Direction Using Shorthand Property
The standard margin property can be expanded to specify differing widths to each side of the selected elements. The syntax for doing this is as follows:
The following example applies a zero-width margin to the top of the div, a 10px margin to the right side, a 50px margin to the left side, and a 100px margin to the left side. View Result
Margin property simplification
Horizontally center elements on a page using margin
As long as the element is a block, and it has an explicitly set width value, margins can be used to center block elements on a page horizontally.
We add a width value that is lower than the width of the window and the auto property of margin then distributes the remaining space to the left and the right:
In the example above we use the shorthand margin declaration to first set 0 to the top and bottom margin values (although this could be any value) and then we use auto to let the browser allocate the space automatically to the left and right margin values.
In the example above, the #myDiv element is set to 80% width which leaves use 20% leftover. The browser distributes this value to the remaining sides so:
It is obvious to assume that the percentage value of margin to margin-left and margin-right would be relative to its parent element.
But that is not the case, when comes to margin-top and margin-bottom. Both these properties, in percentages, aren't relative to the height of the parent container but to the width of the parent container. So,
Margin is one of a few CSS properties that can be set to negative values. This property can be used to overlap elements without absolute positioning.
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website