{"id":23679,"date":"2021-05-11T18:19:53","date_gmt":"2021-05-11T10:19:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23679"},"modified":"2021-12-02T21:34:49","modified_gmt":"2021-12-02T13:34:49","slug":"calculate-css-percentage-margins","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/","title":{"rendered":"Calculating Percentage Margins in CSS"},"content":{"rendered":"<p>Most web designers think they know CSS pretty well. After all, there isn\u2019t that much to it \u2014 a few selector types, a few dozen properties, and some cascading rules that you barely need to remember since they boil down to common sense. But when you get down to the nitty-gritty level, there are plenty of obscure details that few designers truly understand.<\/p>\n<p>When I examined the results of a free CSS test I\u2019ve offered online for the past six months, I discovered <strong>one question that almost <em>no one<\/em> got right<\/strong>. Of the thousands of people who took the test, <strong>fewer than 14% got it right<\/strong>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-is-the-hardest-language\/\" class=\"ref-block__link\" title=\"Read More: CSS Could Be The Hardest Language of All (5 Reasons Why)\" rel=\"bookmark\"><span class=\"screen-reader-text\">CSS Could Be The Hardest Language of All (5 Reasons Why)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-is-the-hardest-language.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-18867 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-is-the-hardest-language.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">CSS Could Be The Hardest Language of All (5 Reasons Why)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tA website may be built upon several web languages such as HTML, CSS, JavaScript, and PHP. Among these...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>The question boils down to this:<em> How Do You Calculate Percentage Margins?<\/em><\/p>\n<h2>The Question<\/h2>\n<p>Say your site has a container <code>div<\/code>, and inside that, a content <code>div<\/code>:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-margin-top@2x.jpg\" alt=\"\" width=\"1000\" height=\"550\"><\/figure>\n<p>Now, let\u2019s give that content <code>div<\/code> a top margin:<\/p>\n<pre>.content {\r\n margin-top: 10%;\r\n }\r\n <\/pre>\n<p>Okay, so it\u2019s 10% \u2026 but 10% of <strong>what<\/strong>? That\u2019s the question that <strong>only 13.8% of people can answer correctly<\/strong>. And keep in mind: these people have access to Google!<\/p>\n<p>What I love about this question is that <strong>it seems like the answer should be obvious<\/strong>. So much so, that I suspect most people just take a guess (and guess wrong). But maybe it <em>doesn\u2019t<\/em> seem obvious to you. I mean, if you really use your imagination, there are many ways the browser could conceivably calculate a margin like this.<\/p>\n<p>So how about if I narrow it down for you since the question in the test is actually multiple choice. Here are your options:<\/p>\n<ul>\n<li>10% of the content div\u2019s height<\/li>\n<li>10% of the container div\u2019s height<\/li>\n<li>10% of the content div\u2019s width<\/li>\n<li>10% of the container div\u2019s width<\/li>\n<\/ul>\n<p>Remember, only 13.8% of people can pick the right answer from this list. That\u2019s way worse than chance!<\/p>\n<p>Look closely at the answers; you\u2019ll see there are really only two things you need to know:<\/p>\n<h2>Container or Content?<\/h2>\n<p>First, is <em>the size of the margin based on the size of the content div itself, or on the size of the container div<\/em>?<\/p>\n<p>Now this isn\u2019t a gimme, but you can probably trust your instincts. If I set a div to be 50% of the width of its container, and then I want its left and right margins to fill the rest of the space, I\u2019d naturally set them to 25% each (so the percentages add up to 100%). For that to work, percentage margins must be based on the dimensions of the container.<\/p>\n<p>Sure enough, two thirds of people who take the test get this part of the answer right.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-q1@2x.jpg\" alt=\"fig-q1@2x\" width=\"500\" height=\"300\"><\/figure>\n<h2>Width or Height?<\/h2>\n<p>Second, <em>is margin-top\u2019s size based on the width or the height of that element<\/em>?<\/p>\n<p>If you\u2019ve been paying attention, you\u2019re probably on your guard already. For so few people to pick the right answer, this has got to be a trick question, right?<\/p>\n<p>And yet, I bet you can barely believe that <strong>the answer <em>isn\u2019t<\/em> height.<\/strong> Well, it isn\u2019t.<\/p>\n<p>Yes, we\u2019re talking about a top margin here. Yes, the size of that margin is a vertical measurement. Yes, if a block is 50% of the height of its container, and you gave it a top margin of 25%, you\u2019d expect that to be 25% of the height of the container. <em>And you\u2019d be wrong.<\/em><\/p>\n<p>Don\u2019t feel bad if you thought it had to be height. Nearly 80% of people who take the test agree with you:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-q2@2x.jpg\" alt=\"\" width=\"500\" height=\"300\"><\/figure>\n<h2>It Makes Sense\u2026 No, Really!<\/h2>\n<p>Still don\u2019t believe it? Here\u2019s a quote from the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/CSS21\/box.html#margin-properties\">W3C CSS spec<\/a>:<\/p>\n<blockquote><p> The percentage is calculated with respect to the width of the generated box\u2019s containing block. Note that this is true for margin-top and margin-bottom as well. <\/p><\/blockquote>\n<p>The same goes for top and bottom padding, in case you were wondering. As for borders, it\u2019s illegal to specify their width as a percentage.<\/p>\n<p>So at this point, you\u2019re probably thinking the creators of CSS are either <em>bonkers<\/em>, or they just made a really dumb mistake. But I\u2019m here to tell you, there are two good reasons to base vertical margins on the width of the containing block:<\/p>\n<h3 id=\"horizontal-and-vertical-consistency\">Horizontal and Vertical Consistency<\/h3>\n<p>There is, of course, a shorthand property that lets you specify the margin for all four sides of a block:<\/p>\n<pre>margin: 10%;<\/pre>\n<p>This expands to:<\/p>\n<pre>margin-top: 10%;\r\n margin-right: 10%;\r\n margin-bottom: 10%;\r\n margin-left: 10%;<\/pre>\n<p>Now, if you wrote either of the above, you\u2019d probably expect the margins on all four sides of the block to be of equal size, wouldn\u2019t you? But if margin-left and margin-right were based on the width of the container, and margin-top and margin-bottom were based on its height, then they\u2019d usually be different!<\/p>\n<h3>Avoiding Circular Dependency<\/h3>\n<p>CSS lays out content in blocks stacked vertically down the page, so the width of a block is usually dictated entirely by the width of its parent. In other words, you can <strong>calculate the width of a block without worrying about what\u2019s <em>inside<\/em> that block<\/strong>.<\/p>\n<p>The height of a block is a different matter. Usually, the height <strong>depends on the combined height of its contents<\/strong>. Change the height of the content, and you change the height of the block. See the problem?<\/p>\n<p>To get the height of the content, you need to know the top and bottom margins that are applied to it. And if those margins depend on the height of the parent block, you\u2019re in trouble, because you can\u2019t calculate one without knowing the other!<\/p>\n<p><strong>Basing vertical margins on the <em>width<\/em> of the container breaks that circular dependency, and makes it possible to lay out the page.<\/strong><\/p>\n<h3>More on Hongkiat:<\/h3>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/\" rel=\"noopener\">Web Design: Equal Column Height With CSS<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-tricks-vertical-align-content\/\" rel=\"noopener\">6 CSS Tricks to Align Content Vertically<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-units\/\" rel=\"noopener\">A Look Into CSS Units: Pixels, EM, and Percentage<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-box-sizing\/\" rel=\"noopener\">A Look Into: CSS3 Box-sizing<\/a><\/li>\n<\/ul>\n<h2>Now Read:\n  <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/\" onclick=\"_gaq.push(['_trackEvent', 'readmore', 'internal', 'calculate-css-percentage-margins']);\" rel=\"noopener\">10 Hidden CSS3 Properties You Should Know<\/a><\/h2>\n<figure><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/\" onclick=\"_gaq.push(['_trackEvent', 'readmore', 'internal', 'calculate-css-percentage-margins']);\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/flex.jpg\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Most web designers think they know CSS pretty well. After all, there isn\u2019t that much to it \u2014 a few selector types, a few dozen properties, and some cascading rules that you barely need to remember since they boil down to common sense. But when you get down to the nitty-gritty level, there are plenty&hellip;<\/p>\n","protected":false},"author":479,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Calculating Percentage Margins in CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Most web designers think they know CSS pretty well. After all, there isn&#039;t that much to it -- a few selector types, a few dozen properties, and some\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Calculating Percentage Margins in CSS\" \/>\n<meta property=\"og:description\" content=\"Most web designers think they know CSS pretty well. After all, there isn&#039;t that much to it -- a few selector types, a few dozen properties, and some\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-11T10:19:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-02T13:34:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-margin-top@2x.jpg\" \/>\n<meta name=\"author\" content=\"Kevin Yank\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin Yank\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/\"},\"author\":{\"name\":\"Kevin Yank\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/59096b1d7afe6e211ac4afc43af3cd0c\"},\"headline\":\"Calculating Percentage Margins in CSS\",\"datePublished\":\"2021-05-11T10:19:53+00:00\",\"dateModified\":\"2021-12-02T13:34:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/\"},\"wordCount\":978,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/calculate-css-percentage-margins\\\/fig-margin-top@2x.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/\",\"name\":\"Calculating Percentage Margins in CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/calculate-css-percentage-margins\\\/fig-margin-top@2x.jpg\",\"datePublished\":\"2021-05-11T10:19:53+00:00\",\"dateModified\":\"2021-12-02T13:34:49+00:00\",\"description\":\"Most web designers think they know CSS pretty well. After all, there isn't that much to it -- a few selector types, a few dozen properties, and some\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/calculate-css-percentage-margins\\\/fig-margin-top@2x.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/calculate-css-percentage-margins\\\/fig-margin-top@2x.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/calculate-css-percentage-margins\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Calculating Percentage Margins in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/59096b1d7afe6e211ac4afc43af3cd0c\",\"name\":\"Kevin Yank\",\"description\":\"Kevin has written about the Web since 1999, with books on PHP, CSS, and JavaScript to his name. He has also hosted podcasts, spoken at conferences, and produced video training, all about the Web. He now leads the development team at sitthetest.com, a web application for making and taking online tests.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/kevinyank\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Calculating Percentage Margins in CSS - Hongkiat","description":"Most web designers think they know CSS pretty well. After all, there isn't that much to it -- a few selector types, a few dozen properties, and some","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/","og_locale":"en_US","og_type":"article","og_title":"Calculating Percentage Margins in CSS","og_description":"Most web designers think they know CSS pretty well. After all, there isn't that much to it -- a few selector types, a few dozen properties, and some","og_url":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-05-11T10:19:53+00:00","article_modified_time":"2021-12-02T13:34:49+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-margin-top@2x.jpg","type":"","width":"","height":""}],"author":"Kevin Yank","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Kevin Yank","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/"},"author":{"name":"Kevin Yank","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/59096b1d7afe6e211ac4afc43af3cd0c"},"headline":"Calculating Percentage Margins in CSS","datePublished":"2021-05-11T10:19:53+00:00","dateModified":"2021-12-02T13:34:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/"},"wordCount":978,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-margin-top@2x.jpg","keywords":["CSS"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/","url":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/","name":"Calculating Percentage Margins in CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-margin-top@2x.jpg","datePublished":"2021-05-11T10:19:53+00:00","dateModified":"2021-12-02T13:34:49+00:00","description":"Most web designers think they know CSS pretty well. After all, there isn't that much to it -- a few selector types, a few dozen properties, and some","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-margin-top@2x.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/calculate-css-percentage-margins\/fig-margin-top@2x.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/calculate-css-percentage-margins\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Calculating Percentage Margins in CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/59096b1d7afe6e211ac4afc43af3cd0c","name":"Kevin Yank","description":"Kevin has written about the Web since 1999, with books on PHP, CSS, and JavaScript to his name. He has also hosted podcasts, spoken at conferences, and produced video training, all about the Web. He now leads the development team at sitthetest.com, a web application for making and taking online tests.","url":"https:\/\/www.hongkiat.com\/blog\/author\/kevinyank\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-69V","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/479"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23679"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23679\/revisions"}],"predecessor-version":[{"id":57134,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23679\/revisions\/57134"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23679"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}