How to solve the spaces between the inline-block elements?

Question

How to solve the spaces between the inline-block elements?

Navigation

#1 by (4 votes)
#2 by (1 votes)

3

When I use elements with the inline-block property, a space appears between the elements:

html, body { margin: 0; padding: 0; }

.padre .hijo {
  display: inline-block;
  padding: 5px;
  background-color: red;
}

<div class="padre">
  <div class="hijo">Hijo 1</div>
  <div class="hijo">Hijo 2</div>
  <div class="hijo">Hijo 3</div>
</div>

Why is this happening and is there any way to eliminate this effect?

html css3 css

asked by aldanux 06.12.2017 в 20:22

source

2 answers

1

You can replace display: inline-block with float:left like this:

html, body { margin: 0; padding: 0; }

.padre .hijo {
  float: left;
  padding: 5px;
  background-color: red;
}

<div class="padre">
  <div class="hijo">Hijo 1</div>
  <div class="hijo">Hijo 2</div>
  <div class="hijo">Hijo 3</div>
</div>

answered by 06.12.2017 в 20:40

Regex javascript password Reload the same URL with a different hash (fragment)

score 4 · Accepted Answer

The behavior of the spaces is part of the elements inline and inline-block .

By default, the inline elements are applied to the properties letter-spacing and word-spacing ( See property index ) which depend on the size font-size that inherit from the parent element and when the elements are in each line separately, it is generated when rendering the DOM a white space (visualized with a _ :

<div class="hijo">Hijo 1</div>_
<div class="hijo">Hijo 2</div>_
<div class="hijo">Hijo 3</div>_

We will now see multitudes of solutions that you can give to the problem to eliminate spaces in DOM or with rules in CSS :

# 1 Remove the spaces between the elements:

Pro : No additional rules are needed in CSS
Against : It is not readable and difficult to maintain the code

html, body { margin: 0; padding: 0; }

.padre .hijo {
  display: inline-block;
  padding: 5px;
  background-color: red;
}

<!-- Ejemplo #1 -->

<div class="padre">
  <div class="hijo">Hijo 1</div><div class="hijo">Hijo 2</div><div class="hijo">Hijo 3</div>
</div>

<br><!-- Ejemplo #2 -->

<div class="padre">
  <div class="hijo">
  Hijo 1
  </div><div class="hijo">
  Hijo 2
  </div><div class="hijo">
  Hijo 3
  </div>
</div>

<br><!-- Ejemplo #3 (trasladamos el '>' del cierre a la próxima linea -->

<div class="padre">
  <div class="hijo">
  Hijo 1
  </div
  ><div class="hijo">
  Hijo 2
  </div
  ><div class="hijo">
  Hijo 3
  </div>
</div>

# 2. Add comments (empty):

Pro : No additional rules are needed in CSS
Against : Can be annoying when writing / reading

html, body { margin: 0; padding: 0; }

.padre .hijo {
  display: inline-block;
  padding: 5px;
  background-color: red;
}

<div class="padre">
     <div class="hijo">Hijo 1</div><!--
  --><div class="hijo">Hijo 2</div><!--
  --><div class="hijo">Hijo 3</div>
</div>

# 3. We set the font size% co_from% to zero

Pro : No change is needed in font-size
Against : Add new rules to DOM

html, body { margin: 0; padding: 0; }

.padre {
  font-size: 0; /* Reducimos */
}

.padre .hijo {

  font-size: 1rem; /* Restablecemos */
 
  display: inline-block;
  padding: 5px;
  background-color: red;
}

<div class="padre">
  <div class="hijo">Hijo 1</div>
  <div class="hijo">Hijo 2</div>
  <div class="hijo">Hijo 3</div>
</div>

# 4. Fix CSS with white-space

Pro : No change is needed in margin
Against : Add new rules to DOM

html, body { margin: 0; padding: 0; }

.padre .hijo {

  margin-right: -4px;
 
  display: inline-block;
  padding: 5px;
  background-color: red;
}

<div class="padre">
  <div class="hijo">Hijo 1</div>
  <div class="hijo">Hijo 2</div>
  <div class="hijo">Hijo 3</div>
</div>

# 5. We subtract in CSS

Pro : No change is needed in letter-spacing
Against : Add new rules to DOM

html, body { margin: 0; padding: 0; }

.padre {
   letter-spacing: -1em; /* Restamos */
}

.padre .hijo { 

  letter-spacing: normal; /* Vuelta a lo normal */ 
  
  display: inline-block;
  padding: 5px;
  background-color: red; 
}

<div class="padre">
  <div class="hijo">Hijo 1</div>
  <div class="hijo">Hijo 2</div>
  <div class="hijo">Hijo 3</div>
</div>

# 6. CSS in the house (thanks to modern browsers)

Pro : No change is needed in flex
Against : Add new rules to DOM

html, body { margin: 0; padding: 0; }

.padre {
   display: flex;
}

.padre .hijo { 
  display: inline-block;
  padding: 5px;
  background-color: red; 
}

<div class="padre">
  <div class="hijo">Hijo 1</div>
  <div class="hijo">Hijo 2</div>
  <div class="hijo">Hijo 3</div>
</div>

Sources: