>> ben-dodd--writings-for-eda >> css-concepts

inline vs inline-block?

In CSS, the DISPLAY property specifies the type of rendering box of an element.

The most common display types are BLOCK, INLINE and INLINE-BLOCK.

The browser will assign default display properties to elements, but these can be changed in CSS.

block vs inline

BLOCK display is used for elements that should be laid out one after the other (like a stack of blocks). Things that are block by default include container elements like <div>, <section> and <p>; headings like <h1> and <h2>; and others like <ul>, <form> and <hr>.

INLINE display is used for elements that should follow after eachother on a line. Things that are inline by default include text styling elements like <em>, <small> and <strong>; media like <img> and <embed>; and <span>.

so what's wrong with inline?

INLINE display has some limitations. For example, here we have a simple paragraph with an inline element. The element has a background colo(u)r and a border.

.inline-element {
  display: inline;
  background-color: orange;
  border: 3px dotted yellow;
}
          

OK, that looks fine. What if we wanted to give those words a bit more space by adding height and width?

.inline-element {
  display: inline;
  background-color: orange;
  border: 3px dotted yellow;
  height: 100px;
  width: 200px;
}
          

Hmmm... How about using margin?

.inline-element {
  display: inline;
  background-color: orange;
  border: 3px dotted yellow;
  margin: 50px;
}
          

That's only added a margin on the left and right... No vertical margins are applied. Padding?

.inline-element {
  display: inline;
  background-color: orange;
  border: 3px dotted yellow;
  padding: 50px;
}
          

OK, so we can't...

• add height
• add width
• add vertical margins

...to an INLINE element. And padding is doing something weird. INLINE-BLOCK, in contrast, applies height, width, margins, and padding as you would expect from a BLOCK element. Unlike a BLOCK element, the INLINE-BLOCK element is place in-line, rather than placed below the previous element.

.inline-element {
  display: inline-block;
  background-color: orange;
  border: 3px dotted yellow;
  padding: 50px;
}
          

where do we use inline-block?

It is not immediately obvious why we need INLINE-BLOCK. But we might get some idea from the elements that are INLINE-BLOCK by default. In all main browsers, this includes <button> and <select>. Chrome and Internet Explorer add <input> and <textarea> to this list.

Let's try illustrate the use of INLINE-BLOCK with a game of Mad Libs.

Here we have been able to use some padding and margins to the INLINE-BLOCK elements. This would not be possible with a display of INLINE.

Another reason you would use INLINE-BLOCK is if you want an inline element to transform. Plain old INLINE elements cannot transform.