html - Why is a float necessary? -
simple 1 here. i'm aware when creating fluid layouts need float elements, why? tried removing float , space appears in-between elements. space coming from? why float necessary? *{ box-sizing: border-box; }
.box{ display: inline-block; width: 50%; border: solid 1px red; /*float: left;*/ }
because inline-block
means "treat element inline on outside , block on inside", browser treats newline between div elements actual literal space character, shows in between elements.
by using floats, change behavior of inline flow, , divs go flush against each other.
here article on how "fight" space between inline-block
divs, if space counter design. tl;dr version can (1) remove spaces/newlines between closing , subsequent opening tags, (2) use negative margins, (3) set font size 0 (so space doesn't show up), (4) float them instead, suggested, or (5) use flexbox.
Comments
Post a Comment