{"id":582,"date":"2021-05-10T12:44:50","date_gmt":"2021-05-10T10:44:50","guid":{"rendered":"http:\/\/strawberrycode.com\/blog\/?p=582"},"modified":"2021-05-31T19:17:26","modified_gmt":"2021-05-31T17:17:26","slug":"css-spacing-elements-plus-selector","status":"publish","type":"post","link":"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/","title":{"rendered":"Clever CSS Spacing Between Elements with + Selector"},"content":{"rendered":"\n<p>Let&#8217;s say you have a list of elements, and you want to elegantly add a bit of space between them so that they don&#8217;t appear too clumped together&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"1024\" height=\"256\" src=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/css_spacing_horiz_small.jpg\" alt=\"CSS Spacing with + selector\" class=\"wp-image-601\" srcset=\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/css_spacing_horiz_small.jpg 1024w, https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/css_spacing_horiz_small-300x75.jpg 300w, https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/css_spacing_horiz_small-768x192.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Well, it&#8217;s pretty easy if you have the right tool: the <code>+<\/code> CSS selector!<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.fruit-container div+div {\n  margin-left: 30px;\n}<\/pre>\n\n\n\n<p><br>You don&#8217;t need to use a <code>margin<\/code> or <code>padding<\/code> on each element and add a <code>first-item<\/code> or <code>last-item<\/code> class to remove the extra spacing, the <code>+<\/code> selector takes care of everything.<\/p>\n\n\n\n<h2>How does it work ? <\/h2>\n\n\n\n<p>Let&#8217;s take an example: if you have <code>div + p<\/code>  in your CSS, it will select the first <code>&lt;p&gt;<\/code> element that is placed immediately after <code>&lt;div&gt;<\/code> elements. That&#8217;s why you add a <code>margin-left<\/code> (and not a <code>margin-right<\/code>) to the items you want to space up.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdWJaRV\" src=\"\/\/codepen.io\/anon\/embed\/mdWJaRV?height=325&amp;theme-id=1&amp;slug-hash=mdWJaRV&amp;default-tab=css,result\" height=\"325\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdWJaRV\" title=\"CodePen Embed mdWJaRV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Indeed this one-line magic trick works for all kinds of elements (images, div, span, li, &#8230;). For more CSS Selectors, have a look at this <a href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\" target=\"_blank\" rel=\"noreferrer noopener\">extensive list<\/a>.<\/p>\n\n\n\n<p>What is your favorite underrated CSS selectors, and how do you use it? <\/p>\n\n\n\n<p>I hope it helps, feel free to <a href=\"https:\/\/www.buymeacoffee.com\/strawberrycode\" target=\"_blank\" rel=\"noreferrer noopener\">buy me a coffee (or tea)<\/a> to support the blog &#x1f642;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s say you have a list of elements, and you want to elegantly add a bit of space between them so that they don&#8217;t appear too clumped together&#8230; Well, it&#8217;s pretty easy if you have the right tool: the + CSS selector! You don&#8217;t need to use a margin or padding on each element and add a first-item or last-item class to remove the extra spacing, the + selector takes care of everything. How does it work ? Let&#8217;s take an example: if you have div + p in your CSS, it will select the first &lt;p&gt; element that is &hellip; <a href=\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Clever CSS Spacing Between Elements with + Selector<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":628,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[115],"tags":[118,117,116],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Clever CSS Spacing Between Elements with + Selector - StrawberryCode<\/title>\n<meta name=\"description\" content=\"How to elegantly add spacing between elements with the + CSS selector? Use the one-line magic trick: element+element\" \/>\n<link rel=\"canonical\" href=\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Clever CSS Spacing Between Elements with + Selector - StrawberryCode\" \/>\n<meta property=\"og:description\" content=\"How to elegantly add spacing between elements with the + CSS selector? Use the one-line magic trick: element+element\" \/>\n<meta property=\"og:url\" content=\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/\" \/>\n<meta property=\"og:site_name\" content=\"StrawberryCode\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-10T10:44:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-31T17:17:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/css-spacing.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/#website\",\"url\":\"https:\/\/strawberrycode.com\/blog\/\",\"name\":\"StrawberryCode\",\"description\":\"Fruit for Thought\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/strawberrycode.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/css-spacing.jpg\",\"contentUrl\":\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/css-spacing.jpg\",\"width\":1280,\"height\":720,\"caption\":\"CSS Spacing\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/#webpage\",\"url\":\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/\",\"name\":\"Clever CSS Spacing Between Elements with + Selector - StrawberryCode\",\"isPartOf\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/#primaryimage\"},\"datePublished\":\"2021-05-10T10:44:50+00:00\",\"dateModified\":\"2021-05-31T17:17:26+00:00\",\"author\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/#\/schema\/person\/c328d959959928f47281d7a0ec779e2a\"},\"description\":\"How to elegantly add spacing between elements with the + CSS selector? Use the one-line magic trick: element+element\",\"breadcrumb\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/\",\"url\":\"https:\/\/strawberrycode.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/\",\"url\":\"https:\/\/strawberrycode.com\/blog\/css-spacing-elements-plus-selector\/\",\"name\":\"Clever CSS Spacing Between Elements with + Selector\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/#\/schema\/person\/c328d959959928f47281d7a0ec779e2a\",\"name\":\"StrawberryCode\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/582"}],"collection":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/comments?post=582"}],"version-history":[{"count":10,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/582\/revisions"}],"predecessor-version":[{"id":639,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/582\/revisions\/639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/media\/628"}],"wp:attachment":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/media?parent=582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/categories?post=582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/tags?post=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}