Width, Height, and Display Basics

What you will learn

• Explain what width and height control.
• Understand display as a behavior setting for layout.
• Notice that element behavior can change without changing the content.
• Read a few beginner size and display examples in plain language.

Why box behavior matters

Once a page has styled cards and sections, beginners start noticing that the boxes themselves also need control.

Width, height, and display help those boxes behave more intentionally instead of just appearing however the browser decides by default.

Beyond color and spacing

Visual style helps, but element behavior matters too.

Width and height in plain language

Width controls how wide an element can be. Height controls how tall it can be.

Beginners do not need to set width and height on every element, but they do need to know those properties exist when a box is behaving unexpectedly.

Size controls

Width is left-to-right size. Height is top-to-bottom size.

What display is doing

display affects how an element participates in the layout. Some elements behave like blocks that take more room, while others behave more like inline content.

Later, display also helps turn a container into a flexbox layout.

Behavior setting

display changes how a box acts in the layout, not what the content means.

Read a tiny example

If CSS says .panel { width: 100%; }, the panel stretches across the available container width. If it says .panel { display: block; }, the panel behaves more like a full block element.

Those are behavior choices, not content changes.

See the box

Width and display help shape how the element behaves on the page.

What to remember before lesson 9

Width, height, and display help individual elements behave more predictably.

The next lesson applies that idea to multiple items at once with Flexbox, which helps arrange rows and columns more calmly.

Take this forward

Element size and layout behavior set up the next step in page structure.