What is the distance from the top and bottom margin and the left and right margin?
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Show The Margins are set using lengths,
percentages, or the keyword
If fewer than four values are set, the missing values are assumed based on the ones that are defined. For example, the following two rule sets would get identical results:
Thus, if only one value is defined, this sets all four margins to the same value. If three values are declared, it is
Any of the individual margins can be declared using longhand, in which case you would define only one value per property:
auto and centeringEach of the margin properties can also accept a value of
In this example, two things are done to center this element horizontally within the available space:
Without the specified width, the It should also be pointed out that Collapsing marginsVertical margins on different elements that touch each other (thus have no content, padding, or borders separating them) will collapse, forming a single margin that is equal to the greater of the adjoining margins. This does not happen on horizontal margins (left and right), only vertical (top and bottom). To illustrate, take the following HTML:
And the following CSS:
In this example, the Common sense would seem to suggest that the vertical margin thickness between the
Although collapsing margins may seem unintuitive at first glance, they are actually useful for a few reasons. First, they prevent empty elements from adding extra, usually undesirable, vertical margin space. Second, they allow for a more consistent approach to declaring universal margins across page elements. For example, headings commonly have vertical margin space, and so do paragraphs. If margins didn’t collapse, headings that follow paragraphs (or vice-versa) would often require resetting the margins on one of the elements in order to achieve a consistent amount of vertical spacing. Third, margin collapse also applies to nested elements. Look at the following pen:
Here, the paragraph element has a top margin set at 30px, and is nested inside a Again, common sense would suggest that the total vertical margin space here would be 90px (20px + 40px + 30px), but instead the margins all collapse into a single 40px margin (the highest of the three). This is helpful in most cases since there is no need to redefine any of the top margins to remove the extra vertical space. Negative MarginsAs you might suspect, while a positive margin value pushes other elements away, a negative margin will either pull the element itself in that direction, or pull other elements toward it. Here’s an example of a container with padding, and the header h2 has negative margins pulling itself through that padding back to the edges: See the Pen
Here’s an example where the first paragraph has a negative bottom margin, which pulls the next paragraph up against. See the Pen Related Properties
Other Resources
Browser Support
IE6 is prone to the doubled float-margin bug, which can be resolved in most cases by adding What is margin and spacing?Spacing is the foundation for almost every modern layout on the web. And it's usually made up of two components: padding (which is the space inside an element) and margin (which is the space outside an element).
What are left and right margins?The margin-bottom specifies the bottom margin of an element. The margin-top specifies the top margin of an element. The margin-left specifies the left margin of an element. The margin-right specifies the right margin of an element.
What is the difference between marginLeft is the position of your entire element, margin-left is the amount of your left margin. For example if your are not in a normal document flow, your left margin is not going to let anything occupy that space.
What is the right margin?The margin-right property in CSS is used to set the right margin of an element. It sets the margin-area on the right side of the element. Negative values are also allowed. The default value of margin-right property is zero.
|