Helpers for common display rules. Flex and grid are intentionally left out. They are included in other mixins.
Most HTML elements are either displayed as block-level elements or inline elements by default.
Learn More About Block vs. InlineA block-level element will stretch to fill the entire width of its container. A block-level element can also have top/bottom margin. All of the span elements below have a inline style of margin: 20px; applied. Notice how all of the inline span elements just ignore the top and bottom margin.
Sometimes you may want inline elements to behave as blocks. In this case you can apply the elr-block class.
Note: elements are automatically converted to block-level when they are floated.
<span class="elr-block">Span with Display Block</span>
This comes in handy when you are dealing with images placed inside parent containers. Notice that weird gap between the bottom of the image and the border. By default images are inline elements. Adding our block helper class gets rid of that ugly gap.
inline img
block image
An inline element will not span the entire width of its parent. It will stay inline. Inline elements usually appear inside of text content. <strong> and <span> are both inline by default. As are <a>, <em> and <img> elements. Inline elements do not support top and bottom margins. Sometimes it may be useful to force elements that are normally block-level to display inline.
<div class="elr-inline">Div with Display Inline</div>
Inline block elements are kind of a hybrid of block level and inline elements. Inline block elements do not take up their entire container. Inline block elements do allow for top and bottom margin. A common use case for inline block is displaying list items on a single line.
<div class="elr-inline-block">Div with Display Inline Block</div>