{"id":366202,"date":"2022-06-03T07:39:11","date_gmt":"2022-06-03T14:39:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=366202"},"modified":"2022-06-03T07:39:12","modified_gmt":"2022-06-03T14:39:12","slug":"please-give-me-some-space","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/please-give-me-some-space\/","title":{"rendered":"Please Give Me Some Space"},"content":{"rendered":"\n<p>There&#8217;s all kinds of ways to do that. Some more advisable and better-suited for certain situations than others, of course.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>We could do it directly in HTML:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p>We go from one line...&lt;br>&lt;br> down a couple more.&lt;\/p><\/code><\/pre>\n\n\n\n<p>But that&#8217;s what CSS is really for:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;p>We go from one line...&lt;span>down a couple more.&lt;\/span>&lt;\/p><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">span {\n  display: block;\n  margin-block-start: 1.5rem;\n}<\/code><\/pre>\n\n\n\n<p>Line height can also give us extra breathing room between lines of text:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  line-height: 1.35;\n}<\/code><\/pre>\n\n\n\n<p>Since we&#8217;re talking text, there&#8217;s also <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/\">letter-spacing<\/a><\/code> and <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-spacing\/\">word-spacing<\/a><\/code>, not to mention <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-indent\/\">text-indent<\/a><\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZErRBzr\" src=\"\/\/codepen.io\/anon\/embed\/ZErRBzr?height=250&amp;theme-id=1&amp;slug-hash=ZErRBzr&amp;default-tab=css,result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZErRBzr\" title=\"CodePen Embed ZErRBzr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But let&#8217;s talk boxes instead of text. Say we have two simple divs:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div>Twiddle Dee&lt;\/div>\n&lt;div>Twiddle Dum&lt;\/div><\/code><\/pre>\n\n\n\n<p>Those are block-level so they&#8217;re already on different lines. We can reach for <code>margin<\/code> again. Or we could create the impression of space with <code>padding<\/code>. I suppose we could <code>translate<\/code> those suckers in either direction:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div:nth-child(2) {\n  transform: translateY(100px);\n}<\/code><\/pre>\n\n\n\n<p>But maybe those elements are <a href=\"https:\/\/css-tricks.com\/absolute-relative-fixed-positioining-how-do-they-differ\/\">absolutely positioned<\/a> so we can use physical offsets:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n  position: absolute;\n}\ndiv:nth-child(1) {\n  inset: 0;\n}\ndiv:nth-child(2) {\n  inset-inline-start: 100px; \/* or top: 100px; *\/\n}<\/code><\/pre>\n\n\n\n<p>If we&#8217;re working in a grid container, <a href=\"https:\/\/css-tricks.com\/minding-the-gap\/\">then we get <code>gap<\/code>-age<\/a>:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;section>\n  &lt;div>Twiddle Dee&lt;\/div>\n  &lt;div>Twiddle Dum&lt;\/div>\n&lt;\/section><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">section {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 100px;\n}<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/gaps-gasp\/\">Same deal<\/a> with a flexible container:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">section {\n  display: flex;\n  gap: 100px;\n}<\/code><\/pre>\n\n\n\n<p>While we&#8217;re working in grid and flexible containers, we could call on any alignment property to generate space.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">section {\n  display: flex;\n  align-items: space-between;\n  justify-content: space-between;\n}<\/code><\/pre>\n\n\n\n<p>There are tables, of course:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;table cellspacing=\"100\">\n  &lt;!-- etc.  -->\n  &lt;tbody>\n    &lt;tr>\n      &lt;td>Twiddle Dee&lt;\/td>\n      &lt;td>Twiddle Dum&lt;\/td>\n    &lt;\/tr>\n  &lt;\/tbody>\n&lt;\/table><\/code><\/pre>\n\n\n\n<p>Or the CSS-y approach:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* We could use `display: table` if we're not working in a table element. *\/\ntable {\n  border-spacing: 100px;\n}<\/code><\/pre>\n\n\n\n<p>Let&#8217;s go deeper into left field. We can make one element look like two using a linear gradient with a hard color stop:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n  background-image:\n    linear-gradient(\n      to right,\n      rgb(255 105 0 \/ 1) 50%,\n      rgb(207 46 46 \/ 1) 50%,\n      rgb(207 46 46 \/ 1) 100%\n    );\n}<\/code><\/pre>\n\n\n\n<p>Then we do a head fake and insert a hard transparent color stop between the two colors:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNMyQLq\" src=\"\/\/codepen.io\/anon\/embed\/WNMyQLq?height=450&amp;theme-id=1&amp;slug-hash=WNMyQLq&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNMyQLq\" title=\"CodePen Embed WNMyQLq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>As long as we&#8217;re fakin&#8217; bacon here, might as well toss in the ol&#8217; &#8220;transparent&#8221; border trick:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvyXGoJ\" src=\"\/\/codepen.io\/anon\/embed\/wvyXGoJ?height=450&amp;theme-id=1&amp;slug-hash=wvyXGoJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvyXGoJ\" title=\"CodePen Embed wvyXGoJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Let&#8217;s go back to text for a moment. Maybe we&#8217;re floating an element and want text to wrap around it&#8230; in the shape of the floated element while leaving some space between the two. We have <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-margin\/\">shape-margin<\/a><\/code> for that:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvyXMVz\" src=\"\/\/codepen.io\/anon\/embed\/wvyXMVz?height=550&amp;theme-id=1&amp;slug-hash=wvyXMVz&amp;default-tab=css,result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvyXMVz\" title=\"CodePen Embed wvyXMVz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Dare I even mention the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Spacer_GIF\" rel=\"noopener\"><code>spacer.gif<\/code> days<\/a>?<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div>Twiddle Dee&lt;\/div>\n&lt;img src=\"spacer.gif\"> &lt;!-- &#x1f922; -->\n&lt;div>Twiddle Dum&lt;\/div><\/code><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"theres-gotta-be-more\">There&#8217;s gotta be more<\/h2>\n\n\n<p>You&#8217;re all a smart bunch with great ideas. Have at it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There&#8217;s all kinds of ways to do that. Some more advisable and better-suited for certain situations than others, of course.<\/p>\n","protected":false},"author":2508,"featured_media":366249,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"Please, Just Give Me Some Space!","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[4951,14893,19048,1392,1124,18878],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/boxes-gap.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":316670,"url":"https:\/\/css-tricks.com\/eleventy-starter-with-tailwind-css-alpine-js\/","url_meta":{"origin":366202,"position":0},"title":"An Eleventy Starter with Tailwind CSS and Alpine.js","date":"July 10, 2020","format":false,"excerpt":"When I decided to try to base my current personal website on Eleventy, I didn't want to reinvent the wheel: I tested all the Eleventy starters built with Tailwind CSS that I could find in Starter Projects from the documentation. Many of the starters seemed to integrate Tailwind CSS in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/eleventy-tailwind-alpine.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303448,"url":"https:\/\/css-tricks.com\/weaving-a-line-through-text-in-css\/","url_meta":{"origin":366202,"position":1},"title":"Weaving a Line Through Text in CSS","date":"February 26, 2020","format":false,"excerpt":"Earlier this year, I came across this demo by Florin Pop, which makes a line go either over or under the letters of a single line heading. I thought this was a cool idea, but there were a few little things about the implementation I felt I could simplify and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/line-weaving-through-text.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3118,"url":"https:\/\/css-tricks.com\/text-blocks-over-image\/","url_meta":{"origin":366202,"position":2},"title":"Text Blocks Over Image","date":"July 27, 2009","format":false,"excerpt":"Someone recently asked me about this technique and my first reaction was that it was probably a little too mundane to cover as a tutorial. But then I got to thinking that there is actually a few interesting things happening here and the style is trendy enough people might be\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/textoverimageexample.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365888,"url":"https:\/\/css-tricks.com\/a-perfect-table-of-contents-with-html-css\/","url_meta":{"origin":366202,"position":3},"title":"A Perfect Table of Contents With HTML + CSS","date":"May 25, 2022","format":false,"excerpt":"Earlier this year, I self-published an ebook called Understanding JavaScript Promises (free for download). Even though I didn't have any intention of turning it into a print book, enough people reached out inquiring about a print version that I decided to self-publish that as well .I thought it would be\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/toc-photo-scaled.jpg?fit=1200%2C812&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335065,"url":"https:\/\/css-tricks.com\/web-components-are-easier-than-you-think\/","url_meta":{"origin":366202,"position":4},"title":"Web Components Are Easier Than You Think","date":"March 8, 2021","format":false,"excerpt":"When I\u2019d go to a conference (when we were able to do such things) and see someone do a presentation on web components, I always thought it was pretty nifty (yes, apparently, I\u2019m from 1950), but it always seemed complicated and excessive. A thousand lines of JavaScript to save four\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/zombie-custom-web-component.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305192,"url":"https:\/\/css-tricks.com\/auto-growing-inputs-textareas\/","url_meta":{"origin":366202,"position":5},"title":"Auto-Growing Inputs &#038; Textareas","date":"March 25, 2020","format":false,"excerpt":"By default, <input> and <textarea> elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case. But of course, there are ways, my friend. There are always\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/08\/forms-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/boxes-gap.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366202"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=366202"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366202\/revisions"}],"predecessor-version":[{"id":366247,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/366202\/revisions\/366247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/366249"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=366202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=366202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=366202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}