{"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":"<p>The <code>margin<\/code> property defines the outermost portion of the box model, creating space around an element, outside of any defined borders.<\/p>\n<p>Margins are set using lengths, percentages, or the keyword <code>auto<\/code> and can have negative values. Here&#8217;s an example:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.box {\n  margin: 0 3em 0 3em;\n}<\/code><\/pre>\n<p><code>margin<\/code> is a shorthand property and accepts up to four values, shown here:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.box {\n    margin: &lt;margin-top&gt; || &lt;margin-right&gt; || &lt;margin-bottom&gt; || &lt;margin-left&gt;\n}&lt;\/margin-left&gt;&lt;\/margin-bottom&gt;&lt;\/margin-right&gt;&lt;\/margin-top&gt;<\/code><\/pre>\n<p>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<pre rel=\"CSS\"><code class=\"language-css\">.box {\n  margin: 0 1.5em;\n}\n\n.box {\n  margin: 0 1.5em 0 1.5em;\n}<\/code><\/pre>\n<p>Thus, if only one value is defined, this sets all four margins to the same value. If three values are declared, it is <code>margin: [top] [left-and-right] [bottom];<\/code>.<\/p>\n<p>Any of the individual margins can be declared using longhand, in which case you would define only one value per property:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.box {\n  margin-top: 20px;\n  margin-right: 10px;\n  margin-bottom: 20px;\n  margin-left: 10px;\n}<\/code><\/pre>\n<h3><code>auto<\/code> and centering<\/h3>\n<p>Each of the margin properties can also accept a value of <code>auto<\/code>. A value of <code>auto<\/code> basically tells the browser to define the margin for you. In most cases, a value of <code>auto<\/code> will be equivalent to a value of <code>0<\/code> (which is the initial value for each margin property) or else whatever space is available on that side of the element. However, <code>auto<\/code> is handy for horizontal centering:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.container {\n  width: 980px;\n  margin: 0 auto;\n}<\/code><\/pre>\n<p>In this example, two things are done to center this element horizontally within the available space:<\/p>\n<ul>\n<li>The element is given a specified width<\/li>\n<li>The left and right margins are set to <code>auto<\/code><\/li>\n<\/ul>\n<p>Without the specified width, the <code>auto<\/code> values would essentially have no effect, setting the left and right margins to <code>0<\/code> or else to whatever is the available space inside the parent element.<\/p>\n<p>It should also be pointed out that <code>auto<\/code> is useful only for horizontal centering, and so using <code>auto<\/code> for top and bottom margins will not center an element vertically, which can be confusing for beginners.<\/p>\n<h3>Collapsing margins<\/h3>\n<p>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<p>To illustrate, take the following HTML:<\/p>\n<pre rel=\"HTML\"><code class=\"language-html\">\n&lt;h2&gt;Collapsing Margins&lt;\/h2&gt;\n\n\n\nExample text.<\/code><\/pre>\n<p>And the following CSS:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">h2 {\n  margin: 0 0 20px 0;\n}\n\np {\n  margin: 10px 0 0 0;\n}<\/code><\/pre>\n<p>In this example, the <code>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<p>Common sense would seem to suggest that the vertical margin thickness between the <code>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<pre class=\"codepen\" data-height=\"175\" style=\"height: 175px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"hpGJI\" data-user=\"impressivewebs\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/hpGJI\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p>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<p>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&#8217;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<p>Third, margin collapse also applies to nested elements. Look at the following pen:<\/p>\n<pre class=\"codepen\" data-height=\"220\" style=\"height: 220px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"vqpkt\" data-user=\"impressivewebs\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/vqpkt\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p>Here, the paragraph element has a top margin set at 30px, and is nested inside a <code>div<\/code> element with a top margin of 40px. In addition, the <code>h2<\/code> element has a bottom margin of 20px.<\/p>\n<p>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<h3>Negative Margins<\/h3>\n<p>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<p>Here&#8217;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<p class=\"codepen\" data-height=\"401\" style=\"height: 401px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"css,result\" data-user=\"chriscoyier\" data-slug-hash=\"GRJvEVV\" style=\"height: 401px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Most Common Use Case for Negative Margins\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/GRJvEVV\" rel=\"noopener\"><br \/>\nMost Common Use Case for Negative Margins<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n<p>Here&#8217;s an example where the first paragraph has a negative bottom margin, which pulls the next paragraph up against.<\/p>\n<p class=\"codepen\" data-height=\"493\" style=\"height: 493px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"css,result\" data-user=\"chriscoyier\" data-slug-hash=\"mdJqEPB\" style=\"height: 493px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Negative Margin pulling bottom paragraph\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/mdJqEPB\" rel=\"noopener\"><br \/>\nNegative Margin pulling bottom paragraph<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding\/\">padding<\/a><\/li>\n<\/ul>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-box\/#margins\" rel=\"noopener\">Margins on W3C<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/margin\" rel=\"noopener\">Margin on MDN<\/a><\/li>\n<li><a href=\"http:\/\/reference.sitepoint.com\/css\/collapsingmargins\" rel=\"noopener\">More on collapsing margins<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>IE6 is prone to the <a href=\"http:\/\/www.positioniseverything.net\/explorer\/doubled-margin.html\" rel=\"noopener\">doubled float-margin bug<\/a>, which can be resolved in most cases by adding <code>display: inline<\/code> to the floated element.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders. Margins are set using lengths, percentages, or the keyword auto and can have negative values. Here&#8217;s an example: .box { margin: 0 3em 0 3em; } margin is a shorthand property and accepts up [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13935,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14087,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding\/","url_meta":{"origin":14069,"position":0},"title":"padding","date":"September 5, 2011","format":false,"excerpt":"The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and\/or borders. Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0.\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332297,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin-block\/","url_meta":{"origin":14069,"position":1},"title":"margin-block","date":"January 6, 2021","format":false,"excerpt":"margin-block is a shorthand property in CSS that sets an element's margin-block-start and margin-block-end values, both of which are logical properties. It creates space around the element in the block direction, which is determined by the element's writing-mode, direction, and text-orientation. The property is part of the\u00a0CSS Logical Properties and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332597,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin-inline\/","url_meta":{"origin":14069,"position":2},"title":"margin-inline","date":"January 14, 2021","format":false,"excerpt":"margin-inline is a shorthand property in CSS that sets an element's margin-inline-start and margin-inline-end values, both of which are logical properties. It creates space around the element in the inline direction, which is determined by the element's writing-mode, direction, and text-orientation. The property is part of the\u00a0CSS Logical Properties and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317104,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inset\/","url_meta":{"origin":14069,"position":3},"title":"inset","date":"July 17, 2020","format":false,"excerpt":"The inset property in CSS is a shorthand for the four inset properties, top, right, bottom and left in one declaration. Just like the four individual properties themselves, inset has no effect on non-positioned (static) elements. In other words, an element must declare an explicit position value before inset properties\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":359742,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-clip-margin\/","url_meta":{"origin":14069,"position":4},"title":"overflow-clip-margin","date":"January 3, 2022","format":false,"excerpt":"The CSS overflow-clip-margin property determines how far the overflow of an element can go beyond the element's box before being clipped. This area is called the overflow clip edge. .element { height: 100px; overflow: clip; \/* required *\/ overflow-clip-margin: 20px; } overflow: clip; clips the element's content while overflow-clip-margin sets\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320118,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-margin\/","url_meta":{"origin":14069,"position":5},"title":"shape-margin","date":"August 31, 2020","format":false,"excerpt":"The CSS shape-margin property adds margin to CSS shapes that are created with the shape-outside property. It acts sorta like shape-image-threshold in that it changes the distance between the CSS shape and the content around it, but instead of working with opacity values to include semi-transparent pixels in the floated\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/shape-margin-illustration.svg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14069"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14069"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14069\/revisions"}],"predecessor-version":[{"id":332321,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14069\/revisions\/332321"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13935"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14069"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}