Add Space Between HTML Elements Only Using CSS

Add space between HTML elements only using CSS

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

How to add space between elements so they fill their container div?

You can do this with Flexbox and justify-content: space-between.

.content {  display: flex;  justify-content: space-between;  max-width: 400px;  margin: 0 auto;  background: #A0C5E8;  padding: 10px 0;}
span {  width: 50px;  height: 50px;  background: black;}

<div class="content">  <span></span>  <span></span>  <span></span>  <span></span></div>

How to make space between elements inside div container

You can use flex with the column-gap property.

Also, setting justify-content: space-between will ensure an even space between elements if the width of the parent container increases.

.container {  display: flex;  column-gap: 20px;  justify-content: space-between;}
.element {  background: yellow;}

<div class="container">  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div></div>

How to add space between a div and the bottom of the page

Just use margin-top instead of top, that way that distance is added at the top instead of the div just being moved by that value, in relation to its original position in the document flow (which doesn't extend the height of the parent element).

div {
  background-color: grey;
  position: relative;
  margin-top: 136px;
}

<div>
  <p>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum</p>
</div>

How to put spaces between text in html?

Try using white-space with value pre.

pre Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at <br> elements.

p {  white-space: pre;}

<p>a b       c</p>

Space-between elements in container

minimal solution

body {  display: flex;  justify-content: center;}
.container {  background-color: yellow;  width: 200px;  border: 2px solid black;  padding: 10px;}
.checkbox {  display: flex;  justify-content: space-around;  padding: 5px;}

<div class="container">  <div class="checkbox">    <label for="check1">this is 1</label>    <input name="check1" type="checkbox" />  </div>  <div class="checkbox">    <label for="check2">this is 2</label>    <input name="check2" type="checkbox" />  </div></div>

Add space between li elements

UPDATE 2021

My original answer was from 2012 when many of the Level 3 CSS Selectors did not exist. To achieve this we would need JS or other explicit CSS styles/classes to achieve it. As @AlphaX has pointed out the best solution now is simply

li.menu-item:not(:last-child) { 
   margin-bottom: 3px;  
}

OLD ANSWER

add:

margin: 0 0 3px 0;

to your #access li and move

background: #0f84e8; /* Show a solid color for older browsers */

to the #access a and take out the border-bottom. Then it will work

Here: http://jsfiddle.net/bpmKW/4/

CSS add space between elements when one is below the other?

A very simple solution would be using negative padding values, but since it's impossible, we can use another simple way, even though it's a bit of a walk around. You can wrap the container with another wrapping element, and give the container a negative margin-top value.

jsFiddle Demo

HTML:

<div class="wrapper">
    <div class="container">
        <div class="button">This is the first button</div>
        <div class="button">This is the second button</div>
    </div>
</div>

CSS:

.wrapper {
    overflow: hidden;
}
.container {
    margin-top: -10px;
}
.button {
    margin-right: 10px;
    margin-top: 10px;
}

how can i add space between table border and text using html only?

<TD> <u> Keith</u> </TD>

Try using   should give you the desired result.

---

Related Topics