EasyConcept

What is the difference between inline, block and inline-block in CSS?

Technology:
CSS
Experience:
Intern,
Junior
Roles:
Frontend Developer,
Full Stack Developer
Topics:
CSS Layout

Quick answer

Block elements start on a new line and take the full available width; inline elements sit in the text flow and ignore width and height; inline-block sits in the flow but accepts width, height, padding and margin on all sides.

Detailed explanation

Headings, paragraphs and div are block by default. span, a and strong are inline: width, height and vertical margin do not apply the way you expect. inline-block is the middle ground used for buttons or icon-and-label pairs that should sit in a row but have a fixed size.

Today Flexbox or Grid usually replaces floats and long rows of inline-block, because inline-block still leaves gaps from the whitespace between tags. Use the display value that matches the layout job, not a habit.

Download CSS PDFMore CSS questions

Related interview questions

  • CSSEasy

    What is the CSS box model?

    Every element is a box made of content, padding, border and margin. The default content-box size counts only the content; border-box includes padding and border in the width you set.

    Intern 路 Junior 路 CSS Layout
  • CSSMedium

    What is the difference between Flexbox and CSS Grid?

    Flexbox is one-dimensional (a row or a column). CSS Grid is two-dimensional (rows and columns at once). Use Flexbox for alignment along a line; use Grid when the layout is a real 2D structure.

    Junior 路 Mid-level 路 CSS Layout
  • CSSMedium

    How does CSS specificity work?

    Specificity is the score the browser uses to decide which rule wins: inline styles beat IDs, IDs beat classes/attributes/pseudo-classes, and those beat elements. When scores tie, the last rule in the source wins.

    Junior 路 Mid-level 路 CSS Layout

Free templates to practise with