Cannot align the adjacent edges of inline-block elements to touch

Question

I just tried using css display: inline-block in my code to create 3 side by side columns. I set the margin and padding to 0, but the edges of the columns are not touching (I bordered the elements to visualize the effect); its like there is some default margin given to display: inline-block.
How can one align the edges of display: inline-block elements without using guess values of -ve margin or absolute positioning.

<div>
  <div style='display: inline-block;'>apple</div>
  <div style='display: inline-block;'>ball</div>
  <div style='display: inline-block;'>cat</div>
</div>

Please can you share a code snipet so that we can see what you mean. — James Ashwood, Sep 21 '20 at 07:26

sandes · Accepted Answer · 2020-09-21T07:34:33.083

0

The solution is to add font-size: 0 to the parent element, and then declare your default font-size on the children.

ul {
    font-size: 0;
}
li { 
    display: inline-block;
    width: 100px;
    font-size: 15px;
}

li:nth-child(1) {
    background: #f33;
}
li:nth-child(2) {
    background: #3f3;
}
li:nth-child(3) {
    background: #33f;
}

    <ul>
        <li>element 1</li>
        <li>element 2</li>
        <li>element 3</li>
    </ul>

edited Sep 21 '20 at 07:34

answered Sep 21 '20 at 07:25

sandes

1,917
17
28

If you don't set a new font size to the children, these will be invisible (they have font-size:0px) – sandes Sep 21 '20 at 07:33
Brilliant! The edges are aligned, but the text within the children have disappeared. – Eazicoding Sep 21 '20 at 07:37
It seems I must set the new font-size to use absolute values like 'px', and not values like 'em' – Eazicoding Sep 21 '20 at 07:42

Cannot align the adjacent edges of inline-block elements to touch

1 Answers1