{"id":41,"date":"2016-02-17T22:22:07","date_gmt":"2016-02-17T22:22:07","guid":{"rendered":"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/test\/?p=41"},"modified":"2017-03-28T19:20:03","modified_gmt":"2017-03-28T19:20:03","slug":"evenly-space-divs-in-same-row-using-css","status":"publish","type":"post","link":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/","title":{"rendered":"How to evenly space divs with gaps in the same row using CSS."},"content":{"rendered":"<h2>How to evenly space DIVs with gaps in the same row using CSS.<\/h2>\r\n<p>Evenly spacing out <span class=\"white_space_pre\">&lt;div&gt;<\/span>s in a row with spaces can appear to be tricky but is actually pretty simple to do. When I first learned CSS, I used to add margins to each box or <span class=\"white_space_pre\">&lt;div&gt;<\/span> on each side to create the spaces, calculating the appropriate percentage amounts for widths and margins. That was prior to using the <span class=\"white_space_pre\">box-sizing: border-box;<\/span> CSS declaration. By using <span class=\"white_space_pre\">box-sizing: border-box;<\/span> declaration, the margin and padding amounts are calculated for you automatically.<\/p>\r\n<p>By using the method below, you can easily specify the width of each container in each row, without having to use margins to place gaps in between each <span class=\"white_space_pre\">&lt;div&gt;<\/span>. Instead of margins, padding is used instead to create the illusion of gaps. This is accomplished by using no background (or transparent) on the parent element.<\/p>\r\n\r\n<h4>CSS<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n.box { \r\n\tfloat: left;\r\n\tpadding: 0 8px;\r\n\twidth: 25%;\r\n\theight: 400px;\r\n\ttext-align: center; \r\n\tbox-sizing: border-box;\r\n}\r\n\r\n.box > div\r\n{\r\n\tbackground-color: #aaa;\r\n\theight: 100%;\r\n\tline-height: 400px;\r\n\tfont-size: 2rem;\r\n\tfont-weight: bold;\r\n}\r\n<\/div>\r\n<\/pre>\r\n\r\n<h4>HTML<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n&lt;div class=&quot;box&quot;&gt;\r\n   &lt;div&gt;Box 1&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;box&quot;&gt;\r\n   &lt;div&gt;Box 2&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;box&quot;&gt;\r\n   &lt;div&gt;Box 3&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;box&quot;&gt;\r\n   &lt;div&gt;Box 4&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/div>\r\n<\/pre>\r\n<p>The amount of padding to add to each parent element (class=&#8221;box&#8221;) can vary, but 8px appears to be a good number, since that would calculate to 16 pixels in between each box.. The children elements of each <span class=\"white_space_pre\">&lt;div&gt;<\/span> with a class of &#8220;box&#8221;, should have a background color declared.<\/p>\r\n<img loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes.png\" alt=\"Evenly spaced DIV&#039;s - CSS\" width=\"1384\" height=\"639\" class=\"alignnone size-full wp-image-44\" srcset=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes.png 1384w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes-300x139.png 300w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes-768x355.png 768w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes-1024x473.png 1024w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes-650x300.png 650w\" sizes=\"(max-width: 1384px) 100vw, 1384px\" \/>\r\n","protected":false},"excerpt":{"rendered":"How to evenly space DIVs with gaps in the same row using CSS. Evenly spacing out &lt;div&gt;s in a row with spaces can appear to be tricky but is actually pretty simple to do. When I first learned CSS, I used to add margins to each box or &lt;div&gt; on each side to create the [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Evenly space divs with gaps in the same row using CSS<\/title>\n<meta name=\"description\" content=\"Learn how to evenly space divs or containers on one row using CSS, providing the illusion of gaps in between each container.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Evenly space divs with gaps in the same row using CSS\" \/>\n<meta property=\"og:description\" content=\"Learn how to evenly space divs or containers on one row using CSS, providing the illusion of gaps in between each container.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-17T22:22:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-03-28T19:20:03+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes.png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes.png\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/02\/boxes.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/#webpage\",\"url\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/\",\"name\":\"Evenly space divs with gaps in the same row using CSS\",\"isPartOf\":{\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/#primaryimage\"},\"datePublished\":\"2016-02-17T22:22:07+00:00\",\"dateModified\":\"2017-03-28T19:20:03+00:00\",\"author\":{\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"Learn how to evenly space divs or containers on one row using CSS, providing the illusion of gaps in between each container.\",\"breadcrumb\":{\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/\",\"url\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/evenly-space-divs-in-same-row-using-css\/\",\"name\":\"How to evenly space divs with gaps in the same row using CSS.\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-F","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/41"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":17,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/41\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}