{"id":14069,"date":"2011-09-05T20:48:43","date_gmt":"2011-09-06T03:48:43","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14069"},"modified":"2021-09-21T15:18:41","modified_gmt":"2021-09-21T22:18:41","slug":"margin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin\/","title":{"rendered":"margin"},"content":{"rendered":"
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:<\/p>\n 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:<\/p>\n Each 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:<\/p>\n Without the specified width, the It should also be pointed out that Vertical 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).<\/p>\n To illustrate, take the following HTML:<\/p>\n And the following CSS:<\/p>\n 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.<\/p>\n 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.<\/p>\n Third, margin collapse also applies to nested elements. Look at the following pen:<\/p>\n 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.<\/p>\n As 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.<\/p>\n 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:<\/p>\n \n See the Pen Here’s an example where the first paragraph has a negative bottom margin, which pulls the next paragraph up against.<\/p>\n \n See the Pen margin<\/code> property defines the outermost portion of the box model, creating space around an element, outside of any defined borders.<\/p>\n
auto<\/code> and can have negative values. Here’s an example:<\/p>\n
.box {\n margin: 0 3em 0 3em;\n}<\/code><\/pre>\n
margin<\/code> is a shorthand property and accepts up to four values, shown here:<\/p>\n
.box {\n margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>\n}<\/margin-left><\/margin-bottom><\/margin-right><\/margin-top><\/code><\/pre>\n
.box {\n margin: 0 1.5em;\n}\n\n.box {\n margin: 0 1.5em 0 1.5em;\n}<\/code><\/pre>\n
margin: [top] [left-and-right] [bottom];<\/code>.<\/p>\n
.box {\n margin-top: 20px;\n margin-right: 10px;\n margin-bottom: 20px;\n margin-left: 10px;\n}<\/code><\/pre>\n
auto<\/code> and centering<\/h3>\n
auto<\/code>. A value of
auto<\/code> basically tells the browser to define the margin for you. In most cases, a value of
auto<\/code> will be equivalent to a value of
0<\/code> (which is the initial value for each margin property) or else whatever space is available on that side of the element. However,
auto<\/code> is handy for horizontal centering:<\/p>\n
.container {\n width: 980px;\n margin: 0 auto;\n}<\/code><\/pre>\n
\n
auto<\/code><\/li>\n<\/ul>\n
auto<\/code> values would essentially have no effect, setting the left and right margins to
0<\/code> or else to whatever is the available space inside the parent element.<\/p>\n
auto<\/code> is useful only for horizontal centering, and so using
auto<\/code> for top and bottom margins will not center an element vertically, which can be confusing for beginners.<\/p>\n
Collapsing margins<\/h3>\n
\n<h2>Collapsing Margins<\/h2>\n\n\n\nExample text.<\/code><\/pre>\n
h2 {\n margin: 0 0 20px 0;\n}\n\np {\n margin: 10px 0 0 0;\n}<\/code><\/pre>\n
h2<\/code> element is given a bottom margin of 20px. The paragraph element, which immediately follows it in the source, has a top margin set at 10px.<\/p>\n
h2<\/code> and the paragraph would be a total of 30px (20px + 10px). But due to margin collapse, the actual thickness ends up being 20px. This is demonstrated in the embedded pen below:<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
div<\/code> element with a top margin of 40px. In addition, the
h2<\/code> element has a bottom margin of 20px.<\/p>\n
Negative Margins<\/h3>\n
\nMost Common Use Case for Negative Margins<\/a> by Chris Coyier (@chriscoyier<\/a>)
\non CodePen<\/a>.<\/span><\/p>\n
\nNegative Margin pulling bottom paragraph<\/a> by Chris Coyier (@chriscoyier<\/a>)
\non CodePen<\/a>.<\/span><\/p>\nRelated Properties<\/h3>\n
\n
Other Resources<\/h3>\n
\n
Browser Support<\/h3>\n
\n\n
\n Chrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n \n Works<\/td>\n Works<\/td>\n Works<\/td>\n Works<\/td>\n Works<\/td>\n Works<\/td>\n Works<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n