Many times when building a project, you’ll want to space out elements in a div or container in CSS. It may be text that needs to be spaced out, links in a nav-bar, images in a carousel or slider, or another feature that you are building. In this article, I’m going to break down how I space elements in a div in CSS using justify-content: space-between.

First, let’s set up our base HTML so that we can visualize how we’re going to space elements in out div in CSS.

<div class="square">
  <p>Text in the square</p>
   <p>Text in the square</p>
</div>

Let’s say you wanted to position the two paragraphs inside the center of the div in CSS. Here’s how the CSS would look like.

.square{
  width: 460px;
  height: 120px;
  background-color: blue;
  text-align: center;
  display: flex;
}

Now, you want each paragraph elements to be evenly spaced horizontally in the div. This is when I like to use justify-content: space-between to help evenly space elements in a div in CSS. It will look something like this:

.square{
  width: 460px;
  height: 120px;
  background-color: blue;
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding: 0px 40px;
}

I also decided to add padding on the left and right to keep the paragraph elements clean and evenly spaced out.

Product of the Day: Canva Email Signature Template. If you’re a web developer or designer looking for a professional email signature, try this template out! No code is needed, and you can edit right on Canva. Our newest email signature template is ready to go. Here’s the link.

<div class="square">
  <p>Text in the square</p>
   <p>Text in the square</p>
  <p>Text in the square</p>
  <p>Text in the square</p>
</div>

As long as the div is wide enough to contain all the elements, these elements will all stay spaced out evenly in your div. That’s the power of justify-content: space-between. And this will work with whatever type of element, whether it’s text, an image, or container. It simple takes all the elements in a div, and “justifies the content” in a way that all of them have the same amount of space between each other.

Other code tags you can use

Here are a few other ways that I sometimes use to evenly space elements in a div using CSS:

• Margin: 0px 10px (let’s say I wanted each element to have a certain space on both the right and left side of 10px; adjusting the margins is good for this purpose
• Float: left and float: right (I use this a lot with nav-menus as I don’t have to worry about flex-box and CSS spacing issues)

I hope you enjoyed my breakdown of how I evenly space elements in a div in CSS. If you know of another simpler or more efficient way, feel free to leave a message as I’m glad to learn more as a developer.

Again, check out our Etsy store if you need a new email signature.