Display Helpers

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. Inline

Display Block

A 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.

Default SpanDefault Span Default SpanDefault Span Default SpanDefault Span Span with Display Block Default SpanDefault Span
            <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

cute kitten image

block image

cute kitten image

Display Inline

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.

Default Div
Default Div
Div with Display Inline
Div with Display Inline
Div with Display Inline
Default Div
Default Div
            <div class="elr-inline">Div with Display Inline</div>
            
          

Display Inline Block

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.

Default Span
Default Span
Div with Display Inline Block
Div with Display Inline Block
Default Span
Default Span
            <div class="elr-inline-block">Div with Display Inline Block</div>