29 Nov 2016
Fix HTML White-Space Rendering from Inline-Block
Using the CSS property,
inline-block provides an alternative to floats where elements align side by side without having to clear. They can be given a height and width, opposed to the
inline property. The issue with this display property is that it renders HTML white-space, sometimes causing an alignment to break. Here are a number of ways to prevent this.
The vertical line is set at the baseline by default. When using
vertical-align: top so that elements align at the top of their respected containers.
Use HTML Comment tags.
Set a CSS negative margin.
Remove white-space from the HTML.
Although these methods may seem a little hacky, inline-block is still a good alternative to avoid clearing...Just make sure to check for whitespace.
From Floats, to Inline-block, to Flexbox
Flexbox presents a new way of how we do CSS layouts. Simply add the flex property,
display: flex, to the container, and its children can be set horizontally or vertically along an axis. The container automatically adjusts elements to fit according to its dimensions. Once
flex is set, child elements can use various properties to define the layout. Here's an example.
justify-content are just a few of the many cool things you can do with flexbox, and there’s no clearing or white-space issues.
This website uses
flex on its container as follow: