Introduction to Block and Inline Properties

Understand the two concepts of flow layout: block and inline.

We'll cover the following

block versus inline

Before we look at any particular layout method, we need to discuss a few concepts. Two important concepts that come out of normal flow — block and inline — affect how we understand layout. Some elements are, by default, block display and start a new line every time we come to them. Thus, for pages in English, we can say that the block direction is vertical or downward because each block element moves us further down the page. Inline elements flow in a perpendicular direction to block flow. In English, inline elements flow from left to right.

Example:
In the example down below, li tags are block level by default. Switching them to inline by removing the comments of display: inline in the CSS li styling and back to block can demonstrate the inline and block directions. When you make any change to the code, wait for a few seconds to see the result of this change on the output. For the inline direction, you should ensure that all list elements are displayed in a horizontal line.

  • HTML
  • CSS (SCSS)
block and inline directions 
It’s important to remember that many languages don’t flow in the same direction as English. Some flow right to left, and some flow vertically. If a page you designed in English is translated into one of these languages, the content may no longer flow in the same inline and block directions, and, thus, your layout may look like zombie barf instead of the zombie surface-to-air missile you set out to create.


Therefore, keeping your designs agnostic of their writing direction can increase the reach (and therefore, the zombie-stomping potential) of your web page. This is not to say that you have to design the layout perfectly in every language direction (unless your audience is global and you want to speak to them individually), nor does suggest that you can’t or shouldn’t make tweaks specific to a particular language direction. If you can do the work once and have it look good in most language direction contexts, that’s better than having to restart from scratch with every new language or language direction.