Add space between HTML elements only using CSS

Question

I have several same HTML elements going one after another    lt span gt 1 lt  span gt   lt span gt 2 lt  span gt   lt span gt 3 lt  span gt    I m looking for the best way of adding space BETWEEN the elements using CSS only   no space    1    space 10px    2    space 10px    3    no space    Additionally    Please write down browser compatibility of your receipts     UPDATE  It looks like I was unclear  I don t want to use ANY ADDITIONAL HTML MARKUP like   lt span gt  lt  span gt    lt span gt  lt  span gt    lt span class  last span  gt  lt  span gt    I don t want to use tables  I want the first and last span to be targeted automatically by CSS  I don t want to use javascript  Optional requirement  last span can be NOT LAST CHILD of the parent tag  but it will be the LAST SPAN of the parent tag  Spans do not have any other tags between them

User · Answer

lt span gt  is an inline element so you cant make spacing on them without making it block level  Try this  Horizontal  span      margin-right  10px      float  left      Vertical  span      margin-bottom  10px      Compatible with all browsers

User · Answer

add these rules to the parent container   display  grid grid-auto-flow  column grid-column-gap  10px   Good reference  https   cssreference io   Browser compatibility  https   gridbyexample com browsers

User · Answer

You can take advantage of the fact that span is an inline element  span       word-spacing 10px      However  this solution will break if you have more than one word of text in your span

User · Answer

If you want to align various items and you like to have same margin around all sides  you can use the following  Each element withing container  regardless of type  will receive the same surrounding margin      container     display  flex     container  gt        margin  5px      If you wish to align items in a row  but have the first element touch the leftmost edge of container  and have all other elements be equally spaced  you can use this      container     display  flex     container  gt   first-child     margin-right  5px     container  gt    not  first-child      margin  5px

User · Answer

You can write like this   span   margin-left 10px    span first-child   margin-left 0

User · Answer

A good way to do it is this   span   span       margin-left  10px      Every span preceded by a span  so  every span except the first  will have margin-left  10px   Here s a more detailed answer to a similar question  Separators between elements without hacks

User · Answer

span middle       margin  0 10px 0 10px    top right bottom left        lt span gt text lt  span gt   lt span class  middle  gt text lt  span gt   lt span gt text lt  span gt

User · Answer

You should wrap your elements inside a container  then use new CSS3 features like css grid   free course  and then use grid-gap value that was created for your specific problem   x000D   x000D  span  x000D    border 1px solid red  x000D    x000D   inRow  x000D    display grid  x000D    grid-template-columns repeat auto-fill auto   x000D    grid-gap 10px   This add space between elements  only works on grid items   x000D    x000D   inColumn  x000D    display grid  x000D    grid-template-rows repeat auto-fill auto   x000D    grid-gap 15px  x000D    x000D   lt div class  inrow  gt  x000D     lt span gt 1 lt  span gt  x000D     lt span gt 2 lt  span gt  x000D     lt span gt 3 lt  span gt  x000D   lt  div gt  x000D   lt div class  inColumn  gt  x000D     lt span gt 4 lt  span gt  x000D     lt span gt 5 lt  span gt  x000D     lt span gt 6 lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Or  instead of setting margin and than overriding it  you can just set it properly right away with the following combo   span not  first-of-type        margin-left   5px     span not  last-of-type        margin-right  5px

User · Answer

Just use margin or padding   In your specific case  you could use margin 0 10px only on the 2nd  lt span gt    UPDATE  Here s a nice CSS3 solution  jsFiddle     span       margin  0 10px     span first-of-type       margin-left  0     span last-of-type       margin-right  0      Advanced element selection using selectors like  nth-child     last-child   first-of-type  etc  is supported since Internet Explorer 9

User · Answer

span not  last-child        margin-right  10px

User · Answer

You can style elements with excluding first one  just in one line of code  span   span       padding-left  10px     No need to change any classes

[css] Add space between HTML elements only using CSS

Examples related to css

Examples related to layout

Examples related to receipt