In this tutorial, we're going to talk about Spacing in Css Spacing – sounds so basic, right? Well, it's not as basic as you might think. Take, for instance, when you visit your favorite e-commerce site to scout for products. The first thing that welcomes you to the platform is an intuitive design with a clear presentation of products. This gives you a great browsing experience.Now take a second to imagine how your favorite e-commerce website would look if all the space separating products, descriptions, reviews, and other related items were eliminated. Trust me, it would only be a matter of time before you'd find a new favorite e-commerce website.If navigating through a website becomes a hassle, people will go elsewhere. Efficiently scanning through a website would be nearly impossible if there wasn't a clear visual distinction between different products, important text, and images.In this article, I will teach you how to better create a highly accessible and visually appealing website. I'll cover all you need to know about spacing in CSS and how you can implement it effectively. Without further ado, let’s dive right in.CSS spacing is an essential feature that helps you arrange and organize every other element of your web application in a neat and sensible manner. This helps improve web accessibility and creates a better user experience.To go more in-depth, CSS spacing refers to how you insert space within and between CSS elements on a web page. It plays a very important role in web design and is used to enhance readability, usability, and the overall aesthetic of a webpage. Spacing consists of various parts, which include padding, margins, and borders. Each of these contributes to the spatial relationship between elements.In the image above, you can distinguish between the example with CSS spacing and the one without, given the definition I gave of what CSS spacing is. You can also likely see which of the two images is better structured, more aesthetically pleasing, and more readable. This shows you how important CSS spacing is. With that being said, let’s talk more in-depth about the importance of CSS spacing.We have already seen some benefits of CSS spacing and why it is important, but here are the main reasons why you should always consider CSS spacing whenever you are building a webpage:When talking about the types of spacing in CSS, there are a lot of properties associated with it. They include, margin, padding, and borders. But overall, there are two main types of spacing:To completely understand each of these types of spacing, let’s consider this example:Given the code above, we have two boxes that illustrate both internal and external spacing. As you can see, we added padding: 2 rem. This added 2 rem of internal space to our boxes.Also, to separate one box from the other, we added a margin-bottom to the first box. This results in that external space you see below our first box in the image below. We also added 2rem worth of external space to the left side of our second box.If you've noticed, the internal spacing increases the size of our element, while the external spacing either adjusts or changes the position of either the parent element or surrounding elements.Internal space is usually created with padding, and external space is usually created with margins. Here are a few differences between the two types of spacing:To fully understand CSS spacing, you must understand the CSS box model. This is a fundamental concept in CSS that shows the layout of elements. Every element follows the box model, so it is essential that you know how it works.There are four components that make up the box model, and they include:The content is the core of the box model, and it is where the text, image, and so on of the element reside.Padding is the internal space that surrounds the content. It's used to provide spacing between the content and the border. It also increases the dimension of the background of an element.The border is the bridge between internal space and external space. It goes all around the padding, and its shape, size, and color are controlled by the border property. The main aim of the border property is to create a boundary around the element. It also adds aesthetics to the element.The margin is the external space, and its main purpose is to create space between different elements. This is used to enhance readability and visual organization.To estimate the total size of an element, you'll need to consider all these components. Full knowledge of the box model will give you the power to control the CSS spacing and alignment of elements on the page.Let’s consider this code to illustrate how the box model works:Seems like pretty self-explanatory code, right? As you can see, we tried as much as possible to use all the components of the box model. We started off by defining the dimensions of the content component, giving it a width and height of 100px. Using the Flexbox layout model, we aligned the content to the center.Next, we added a padding of 20px. This increased the inner spacing, which increased the dimension of the box, making the background larger.You can see the blueish border, which goes around the padding. It separates the inner spacing from the outer spacing. It was set using the border property and has a size of 10px.Lastly, we have the margin set to 30px. This is responsible for creating outer spacing that separates elements from each other.Here is what our result looks like:As you can see in the image above, we have all the elements of a box model present. This may not always be the case, as most of these components can be manually assigned values or can also be totally removed.There are several other layout models you can use when designing your websites. And keep in mind that CSS spacing works a bit differently in these other models. Firstly, let’s look at the other major layout models that are widely in use and how CSS spacing works when you're using them. They include:Explaining in detail how CSS Flexbox works is beyond the scope of this article – but if you want to learn more about it, you can read the documentation. You can also check out this crash course on freeCodeCamp's YouTube channel.Our main focus here will be on the gap property. You can use this property for both CSS Flexbox and CSS Grid. In CSS Flexbox, you use it to create space between each flex item, which lets you control the space between items.Let’s take for instance this code:In the code above, we have three flex items. We set a gap property of 20px, which places a 20px space in between each child.You can also use various other CSS properties in the CSS Flexbox model for CSS spacing. They include:Here is an image that shows some of these properties and how their values function:Spacing in the Grid model isn’t so different from the Flexbox model. Let’s explore some of the properties that control spacing in CSS grid.To illustrate, consider this code:Here we set the display property to grid. The grid is then set to have three equal-sized columns using grid-template-columns: 1fr 1fr 1fr.We then used the grid-column-gap property to create a gap of 50px between the columns, while grid-row-gap creates a gap of 20px between the rows.Below is the result we get from having six grid items:When we discussed the box model, we classified text as part of the content component of the box model. Well, there are several properties you can use on text to add spacing in order to meet your specific needs. Some of these properties include:Here is some code that shows how each of these properties operates:In the code above, we created several divs with a class of text, each having a p tag with a class name that describes the property that the text will have. The first p tag is used to illustrate the letter-spacing property, and we set a 5px space between each letter. Next, we have the word-spacing property, and with this property, we gave a 20px gap between each word.The line-height property here gives the p tag a 10rem vertical gap.And for the p tag with the text-align property value set to center, we have equal space on the left and right sides of the text.Another property we illustrated was the text-indent property. We set its value to 50px, and this well indents the text, giving it a 50px space at the start of the first line of the text.Last but not least, we set the last p tag to have a white-space property value of no-wrap," which makes the text flow in a horizontal line without ever wrapping to the next line.Here is a screenshot of what this code produces when it appears in the browser:We have discussed a lot of details about CSS spacing. Now to wrap it up, let’s build a simple review form so you see CSS spacing in action.The code above shows our review form. We have h2 which holds the form title. Next, we have the description in a p tag. Last but not least, we have our form, which holds the input fields and a submit button. In the code above, we have added our CSS spacing. You can see the properties such as the margin, padding, line-height, letter-spacing, and some other properties we talked about earlier and the values we gave to them.If we run our code and view it in the browser, this is the result we get:With our CSS Spacing, we have been able to align the h2 and p to the center, and we have been able to make our input fields look presentable with the padding in the input fields. By applying margin, we have been able to separate elements from each other, like the h2, p, form, and the submit button.From the image above, you can clearly tell which is the better version. CSS spacing makes the review form look better and is also easier to understand.In conclusion, CSS spacing is a fundamental aspect of web development, and mastering these concepts is essential for every front-end developer. With proper use of padding, margin, and all the other spacing properties we talked about, you can create designs that are both intuitive and comfortable, guiding your user’s eyes smoothly from one element to another.While CSS spacing may appear to be a simple concept at first glance, it requires a bit of practice to comfortably choose between spacing properties and use them correctly.Always remember that good spacing breathes life into your pages, making them more readable, engaging, classy, and intuitive. Happy coding!Feel free to connect with me on the following platforms:A front-end developer and technical writer with diverse experience ranging from graphic design to front-end development. I love creating appealing, user-friendly solutions and writing tech blogs. If you read this far, tweet to the author to show them you care. Tweet a thanks Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can make a tax-deductible donation here.