CSS Code Add Space Between Inline Elements

CSS Code Several Ways to Control and Add Space Between Inline or Inline Block Elements

Surround the inline or inline-block elements you want to add spacing to with a div and set the parent div word-spacing property

/* any inline elements within the <div class='container'> will have a 20px spacing between then */ .container { word-spacing:20px; /* change to ajust spacing */ }

Remember that this also sets the word-spacing property for any elements within .container so you will have to reset the css word-spacing property for those elements.

Using margin-right property on inline elements to control spacing between inline elements

.inline-block-item { display: inline-block; margin-right:20px; /* change to ajust spacing */ } /* remove right margin from the last item */ .inline-block-item:last-child { margin-right:0; }

Now you might think this is no good because you have already set the margin property on the inline elements to center them on the screen. You can still set the margin right property to create space between inline elements like so:

.inline-block-item { display:inline-block; margin:15px auto /* to make inline elements center horizontally */ margin-right:20px; /* creates 20px space between inline block elements */ } /* remove right margin from the last item */ .inline-block-item:last-child { margin-right:0; }

Use flexbox with gap property to add space between inline elements

.flex-container { display:flex; gap:20px; /* Adds space between items */ justify-content:center; /* if you want the inline items centered horizontally */ align-items:center; /* if you want the inline items centered vertically */ } .inline { display:inline-block; }

Note that with this method you can't use margin:15px auto; etc to center the inline items because that will change the spacing between. Instead use justify-content:center; to center the inline items horizontally.