This article will take you to the very basics of CSS layout. We will look into a display property, which defines the display behavior of an element – if and how the element is positioned in a layout. Every HTML element has a default display value depending on what type of element it is, and the default display value for most elements is either inline or block. We will present a way to create boxes that can (or not) be displayed side by side, that wrap the way we expect them to wrap or to be positioned in the next line. Layouts that we used to create with floats, are now possible with a display property, so we don’t have to clear the floats.
We will explain the difference between display: inline vs inline-block vs block with examples, and will also list a few best practices and when to use each.
Display: inline – what is this all about?
display: inline will display an element in the same line – therefore inline. An element that has an inline value will never be positioned in a new line.
Element with an inline value takes as much width as its content. If we try to set width and height on an inline element, it does not have any effects.
In addition, top and bottom margins and paddings are not respected, they will simply overlap over the lines above and under, no matter whether margins and paddings are defined. An inline element will accept the left and right margin and padding, and they will push other elements horizontally away, not vertically, because the element stays inline.
The most important facts to remember when assigning display: inline to an element are:
- stays in the same line
- width and height have no effect
- top and bottom margins and paddings have no effect
- left and right padding push other elements horizontally away
Typical examples of inline elements are <span> and <a>. In addition, below you will find a list of HTML elements that by default have an inline property, meaning that compared to block elements create a shorter structure, and do not begin on a new line:
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img (look below in a inline-block section), map, object, q, script, span, sub, sup
In addition to the list of elements above, we should also bring out that the majority of the formatting tags, such as <em>, <strong>, <i>, <small> etc. are also displayed inline.
.my-inline-element
display: inline;
width: 1000px; /* assigning width won't have any effect */
height: 2000px; /* assigning height won't have any effect */
padding: 10px; /* assigning padding won't have any effect on top and bottom, just left and right*/
margin: 20px; /* assigning margin won't have any effect on top and bottom, just left and right*/
}Display: inline-block – what is this all about?
In short, an element that is set to inline-block is very similar to the element that is set to inline – it will still be positioned in the same line. The biggest difference is that the inline-block elements respect when we set width, height, and top and bottom margin and padding.
display: inline-block presented a new way to create boxes that are positioned side-by-side, in one line, but collapse and wrap properly depending on the available space in the containing element and depending on the width, height, padding, and margin specifications that they have. For this reason, the inline-block pushed away layouts that were previously accomplished with floats, which is probably the biggest advantage of inline-block property.
The most important facts to remember when assigning display: inline-block to an element are:
- stays in the same line
- width and height have effect
- margins and paddings have effect – they can push other elements horizontally and vertically away
<button> fulfils the criteria for default value of inline-block, <textarea>, <input>, and <select> also have a default inline-block value. In addition, browsers technically use display: inline for <img>, but they give a special treatment to images and follow all traits of inline-block.
With an element that has display: inline-block property the width, height, paddings and margins are all respected, but the two copies of the element (block) can still sit side by side, because the blocks are still in one line:
.inline-block-element {
display: inline-block; /* if possible an element will be displayed in the same line */
width: 1000px; /* assigning width will have an effect */
height: 2000px; /* assigning height will have an effect */
padding: 10px; /* assigning padding will have an effect on all directions - top, bottom, left, and right */
margin: 20px; /* assigning margin have an effect on all directions */Display: block – what is this all about?
Two typical examples of block elements are <div> and <p> tags – they start in a new line and occupy the entire width.
With display: block property the block element doesn’t sit next to other elements – a line breaks after the displayed element – the block element starts on a new line and takes up the full width of its parent element available, and that is the biggest difference between display: inline-block and display: block.
As with display: inline, some elements have a default block property assigned, and below you will find a list of a few – they start in a new line and take up the entire width of a parent element (if not defined otherwise):
- div
- h1…h6
- p
- li
- section
- form
- header
- footer
An example of an element with a block property displayed:
.block-element {
display: block; /* element will be displayed in a new line*/
width: 1000px; /* by default takes entire width of a parent element, but assigning width property can override that effect */
height: 2000px; /* assigning height will have an effect */
padding: 10px; /* assigning padding will have an effect on all directions - top, bottom, left, and right */
margin: 20px; /* assigning margin have an effect on all directions */So, when should we use display: inline, inline-block, and when block properties?
We can use display: inline when we want to apply a style to a short span of text, like a few words inside text.
We can use display: block when we want to apply a style to a larger chunk of text, where we have areas with width and height.
We can use inline-block for images when we want to have small blocks flowing left-to-right, top-to-bottom like regular text, but we still want to have them positioned as blocks.
Basically, in most cases, we should simply use the default property, like <strong> or <em> for inline, <div> or <p> for blocks. Overriding the default property comes in handy when we, for example, want to hide elements with JavaScript or simply position them differently.