Layouts

Master the foundation of CSS layouts — every element is a box, and display controls behavior.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

💡 Think of the Box Model Like a Picture Frame

Every HTML element is like a framed picture on a wall:

Layer

Frame Analogy

CSS Property

Content

The actual photo/artwork

width, height

Padding

The mat/white space around the photo

padding

Border

The actual frame

border

Margin

Wall space between frames

margin

Why This Lesson Matters

Most beginners think CSS is about colors and fonts. They are wrong.

Layout problems, broken designs, elements not aligning, weird spacing, mobile issues — 90% of these problems come from NOT understanding the Box Model and Display.

The CSS Box Model (Most Important Concept)

Each box is made of four layers, from inside to outside:

Padding (Space Inside the Box)

Padding creates space between the content and the border. Think of padding as breathing room inside the box.

Margin (Space Outside the Box)

Margin creates space OUTSIDE the element. It pushes other elements away.

The box-sizing Fix (Industry Standard)

By default, width = content only. Padding + border get added ON TOP.

This breaks layouts! The fix: box-sizing: border-box

CSS Display Property

The display property controls how an element participates in layout.

display: none vs visibility: hidden

Practice Challenge

Key Takeaways

Practice quiz

How many layers make up the CSS box model, from inside out?

  • Content, border, padding, margin
  • Padding, content, margin, border
  • Content, padding, border, margin
  • Margin, border, padding, content

Answer: Content, padding, border, margin. From inside out the box model is content, then padding, then border, then margin.

Which box model layer is the space INSIDE the border, around the content?

  • Padding
  • Margin
  • Border
  • Outline

Answer: Padding. Padding is the breathing room inside the border between the border and the content.

With the default , where do padding and border go relative to ?

  • They are included inside the declared width
  • They replace the width
  • They are ignored
  • They are added on top of the declared width

Answer: They are added on top of the declared width. With content-box, width applies to content only and padding plus border are added on top, increasing the total size.

Which declaration makes width include padding and border for predictable sizing?

  • box-sizing: content-box
  • box-sizing: border-box
  • box-model: include
  • sizing: full

Answer: box-sizing: border-box. box-sizing: border-box makes the declared width include padding and border, the industry-standard fix.

Which display value makes an element take the full width and stack on its own line?

  • block
  • inline
  • inline-block
  • flex-item

Answer: block. Block elements take the full available width and stack vertically, each on a new line.

Which statement about elements is true?

  • They respect width and height
  • They always start a new line
  • They ignore width and height settings
  • They cannot contain text

Answer: They ignore width and height settings. Inline elements flow with the text and ignore explicit width and height.

Which display value flows inline with text but still respects width and height?

  • block
  • inline-block
  • inline
  • none

Answer: inline-block. inline-block sits inline like text but honors width and height — the best of both.

What is the common pattern to horizontally center a fixed-width block?

  • text-align: center on the block
  • padding: auto
  • float: center
  • margin: 0 auto with a set width/max-width

Answer: margin: 0 auto with a set width/max-width. Setting a width (or max-width) plus margin-left/right of auto (margin: 0 auto) centers a block horizontally.

What is the key difference between and ?

  • They behave identically
  • display: none removes the element from layout; visibility: hidden keeps its space
  • visibility: hidden removes the element; display: none keeps its space
  • Neither affects layout

Answer: display: none removes the element from layout; visibility: hidden keeps its space. display: none removes the element entirely (no space reserved); visibility: hidden hides it but still reserves its space.

Which CSS reset is commonly applied to all elements for predictable layouts?

  • * { display: block; }
  • * { margin: auto; }
  • * { box-sizing: border-box; }
  • * { position: relative; }

Answer: * { box-sizing: border-box; }. Applying box-sizing: border-box to all elements gives predictable sizing across the whole page.

Continue this course