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>