Sizing & Display

Definition: width and height set an element's size, while display controls how it flows — as a full-width block or an inline piece that sits within a line.

Block vs inline

• Block elements (like <div>, <p>) start on a new line and stretch full width
• Inline elements (like <span>, <a>) sit side by side within text

Example

.block  { display: block; width: 200px; }
.inline { display: inline; }

You can change an element's default with display — for example, making links behave like blocks for a vertical menu.

💡 Tip: setting a width on an inline element has no effect — switch it to block or inline-block first.