Control Element Size and Spacing

Every rendered element has a rectangular box. Read its regions from the inside outward: content, padding, and border. Margin sits outside the border.

Content is where text or other element content appears. Padding creates room inside the border, around that content. Margin creates space outside the border, separating the element from nearby boxes.

A border surrounds the padding and content. Margin is not part of the visible bordered card.

Create index.html and styles.css in the same local folder. Paste the complete files below, then open index.html in your browser.

The borders make each card boundary visible. The empty room between card text and its border is padding. The blank gap after each card is margin.

Inspect the first article.session-card in your browser developer tools. In the Computed or Layout panel, find the box-model diagram.

The center represents the content area. Moving outward, find padding, border, and margin. The measurements shown there help you see where each region begins and ends. Panel names and appearance vary by browser, but the nested model is the same.

An ordinary article is a block box. In these first sizing examples, use box-sizing: content-box;: a declared width names the content width.

Use width: auto; when the card should use the available horizontal space. The browser accounts for the card’s padding and border while determining that space.

Use height: auto; for ordinary text in normal flow. When text needs additional lines, the card grows taller with it.

Replace the first card’s existing .session-notes paragraph with this exact paragraph. It is deliberately long enough to wrap in the demonstrated card.

Add these rules to styles.css, then save both files and refresh index.html. The first card becomes taller as the supplied notes wrap, while width: auto; continues to govern its horizontal size.

Choose a fixed width when the example needs one exact declared content width. Choose a percentage when the width should be a proportion of its containing block’s content width.

Here, .workshop has a 400px content width because its padding and border are both zero. Therefore, a child declaration of width: 50%; produces a 200px declared width. This is a demonstration measurement, not a responsive layout pattern.

A fixed height constrains vertical space, but it does not guarantee that all text fits inside it.

A card has two different kinds of space:

• Padding sits inside the border, between the content and the edge of the card.
• Margin sits outside the border and separates the card from nearby elements.

A border is the visible line between those regions. Its width is part of the box, so it contributes to the element’s dimensions.

Use a side-specific property when only one side needs adjustment. For example, padding-left adds internal space on the left, while margin-bottom adds external space below an element.

Shorthands set several sides at once. Their values always follow a predictable pattern.

These declarations style each article.session-card in the Workshop Details page.

A declared width does not always describe the same part of a box. box-sizing decides whether that width applies to the content alone or to the whole border box.

With box-sizing: content-box;, width: 200px; sets the content width. Add left and right padding (32px total) and borders (4px total) to find the border-box width: 236px.

With box-sizing: border-box;, the declared width already includes content, padding, and border. The border-box width is therefore 200px. Margin remains outside in both cases.

In styles.css, use this rule to test the content-box version. Save and refresh index.html, then inspect a card in your browser developer tools. Next, change only content-box to border-box, save, refresh, and inspect again.

Normal flow: lines and boxes

In normal document flow, ordinary block boxes are placed one after another. An article is block-level by default, so each workshop card begins on a new line.

Inline content flows within a line. A span, such as the Beginner label, is ordinarily inline and can share a line with nearby inline content.

When a block box has width: auto;, it ordinarily uses the available horizontal space in its parent. This visual behavior does not change the element’s HTML meaning.

Use display when an individual element needs different visual flow or sizing behavior. The element keeps its HTML meaning: changing a span to inline-block does not turn it into a heading or a button.

An ordinary non-replaced inline element does not use width and height to form a sized box in the way a block box does. Choose inline-block when an element must remain inline-level while accepting explicit dimensions.

Add this rule to styles.css when each Beginner label needs an explicit width but must remain inline-level. Save the file and refresh index.html.

Two consecutive block siblings in normal flow can have touching vertical margins. When those touching margins are positive, they collapse into one visible gap. The gap is the larger margin, not the sum of both margins.

Margin remains outside each card’s border. This step considers only vertical margins between consecutive block siblings.

Replace only the opening article tags in index.html. Keep the existing session-card class on both cards and leave each closing </article> tag unchanged.

Add these rules to styles.css, then save both files and refresh the browser. The two article elements remain ordinary block siblings.

The collapse rule is specific. It does not mean that every pair of margins combines or disappears. The comparison below stays within the situations needed for these cards.

Start with the constrained dimension

Overflow happens when content needs more space than its box provides. First inspect the constrained dimension. A fixed height can leave too little vertical space for notes that wrap onto several lines.

With height: 48px;, extra text can extend beyond the paragraph’s box. The box still occupies only its declared layout height. The default treatment, overflow: visible;, lets the extra text paint outside that boundary; it does not make the box taller.

Choose a treatment only after deciding whether the constrained size is intentional. For ordinary session prose, a fixed height is usually unnecessary: let the paragraph grow. If a region must remain a particular height, its necessary content must still be reachable.

Alternative A: ordinary prose

Replace the .session-notes rule you are testing with this rule only when the notes do not need a fixed-height region. Do not add Alternative B as well. Save styles.css and refresh index.html.

Alternative B: intentionally constrained region

Use this separate replacement rule only when the notes must remain in a 48px-tall region. Do not add Alternative A as well. Save styles.css and refresh index.html.

display: none; does more than make an element visually disappear. It removes the element and all of its descendants from normal layout, so neighboring content can move into its former space.

It also normally removes that content from the accessibility tree: the browser’s representation of content used by assistive technologies such as screen readers. The HTML can still contain the element, but source code alone does not keep it available to a screen reader.

The Workshop Details page includes an essential access note: The entrance is step-free. Hiding this p.access-note with display: none; makes the note unavailable to people who need that information through a screen reader as well as to sighted users.

This differs from overflow behavior. Overflow controls what happens when content exceeds a box’s available space. display: none; instead removes the element itself from layout and normally from the accessibility tree.

Current rule in styles.css

This final repair combines techniques you have already used. Check the page in a deliberate order:

1. Confirm the card’s declared width and box-sizing.
2. Confirm that padding and borders fit within the required border-box width.
3. Give the card internal padding and give the sibling boundary one intentional margin.
4. Make the span tag a sized inline-level box.
5. Let ordinary notes grow instead of constraining them.
6. Restore the essential access note to normal layout.

The target is two 200px border-box cards with a 24px gap, readable notes, a compact sized tag, and an access note that remains available.

Create or open index.html and styles.css in the same local folder. Replace the contents of index.html with this complete markup. The first card has longer notes so you can confirm that ordinary text remains readable when it needs multiple lines.

index.html

Replace the contents of styles.css with the completed stylesheet, save it, and refresh index.html. Then inspect the first .session-card in browser developer tools. Compare its box-model values with the expected browser and inspection result attached to the code.

styles.css