Block & Inline Elements (and inner display) in CSS layouts

HTML elements have a display behavior of block or inline. The generating element determines which it would be - for ex, <div> , <p> are by default block; <a> , <span> are inline.

Block Elements

• Block element boxes are laid out in a new line.
• They extend in the inline direction to fill the space available in its container, unless width is explicitly mentioned.
• Horizontal & vertical margins and paddings are respected.
• They can contain other block or inline elements

Inline Elements

• Inline elements are displayed side by side and take only as much space as they need.
• They don't accept width or height properties, or vertical margins or paddings (they technically accept, but they don't cause other inline boxes to move away from the box).

An intermediate option is inline-block. Inline-block elements behave similar to inline - expect it's height ,width as well as margin and padding can be specified.

Inner Display

Display property also takes value of flex, grid, table, columns, etc.

Are those and block/inline mutually exclusive?

No. Although display is used for both, they target two different display dimensions - outer (whether an element is treated as a block or inline element) & inner (how the direct children of that element are laid out, i.e, determining the formatting context of the children).
CSS Display Module Level 3 introduces the two-value syntax for the display property, enabling the specification of the outer and inner display type (ex: display: inline flex;). (Check for browser support).

Watch Out For

• Pseudo Elements: :before , :after are inline elements keep in mind while assigning width, height
• inline-block: An element with display: inline-block creates a Block Formatting Context (BFC)
• Display: inline: If a block flow box is inlinified, its inner display type is set to flow-root so that it remains a block container. (This is an unusual use case - it's better to use the correct HTML element)
• Inner layout: If you specify the inner layout without specifying outer layout, outer layout will default to block

• White space in inline-elements: White spaces causes an anonymous inline box to be generated. This may cause some issue with your calculations.
  Line breaks used for formatting between 2 inline/ inline-block elements may also show generate whitespace (in some browsers). This may conflict with your desired layout.
  

• Display: none vs visibility: hidden: These two declarations may seem equivalent. But they are not. With display none, the element box is not created. This makes the element behaves like it is deleted. Adjacent elements do not leave an empty place for the element, but moves to take its place. 'visibility: hidden' doesn't remove an element completely. It just makes the element invisible. So the space left behind is left empty and adjacent elements stay in original position. Take this into account if you want to toggle the visibility of an element.