When I use elements with the property inline-block
I get a space 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 a way to remove this effect?
The behavior of spaces is part of the
inline
and elementsinline-block
.By default , the properties and ( See property index
inline
) are applied to the elements, which depend on the size they inherit from the parent element and since the elements are on each line separately, a white space is generated when rendering (displayed with a :letter-spacing
word-spacing
font-size
DOM
_
We are now going to see multitudes of solutions that you can give to the problem to eliminate the spaces in the
DOM
or with rules in theCSS
:#1. Remove spaces between elements:
CSS
#two. Add comments (empty):
CSS
#3. We set the font size
font-size
to zeroDOM
CSS
#4. arrangement
white-space
withmargin
DOM
CSS
#5. We subtract in
letter-spacing
DOM
CSS
#6.
flex
in the house (thanks to modern browsers)DOM
CSS
Sources:
You can replace
display: inline-block
withfloat:left
like this: