Skip to content

Clarify explanation #41472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Clarify explanation #41472

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f22c2cb
Clarify explanation
Ellin Oct 11, 2025
9f381be
Remove "vertical" and "horizontal" terms
Ellin Oct 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions files/en-us/learn_web_development/core/styling_basics/box_model/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ Some HTML elements, such as `<h1>` and `<p>`, use `block` as their outer display
If a box has a display type of `inline`, then:

- The box will not break onto a new line.
- The {{cssxref("width")}} and {{cssxref("height")}} properties will not apply.
- Top and bottom padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
- Left and right padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
- The {{cssxref("width")}}, {{cssxref("height")}}, and top and bottom margins will have no effect.
- **Top and bottom** padding and borders will change the size of the box without affecting the position of surrounding content, which can cause overlapping.
- **Left and right** padding, margins, and borders of the box will affect the position of surrounding inline boxes.

Some HTML elements, such as `<a>`, `<span>`, `<em>` and `<strong>` use `inline` as their outer display type by default.

Expand Down Expand Up @@ -506,7 +506,7 @@ body {

All of the above fully applies to block boxes. Some of the properties can apply to inline boxes too, such as those created by a `<span>` element.

In the example below, we have a `<span>` inside a paragraph. We have applied a `width`, `height`, `margin`, `border`, and `padding` to it. You can see that the width, height, and vertical margins do not affect the `<span>`. The vertical padding and border alter the size of the inline box but don't affect the position of the surrounding content. Instead, the vertical padding and border overlap other words in the paragraph. Only the horizontal padding, margins, and borders affect the position of the text surrounding the `<span>`.
In the example below, we have a `<span>` inside a paragraph. We have applied a `width`, `height`, `margin`, `border`, and `padding` to it. You can see that the width, height, and top and bottom margins do not affect the `<span>`. The top and bottom padding and borders alter the size of the inline box but don't affect the position of the surrounding content. Instead, the top and bottom padding and borders overlap other words in the paragraph. Only the left and right padding, margins, and borders affect the position of the text surrounding the `<span>`.

```html live-sample___inline-box-model
<p>
Expand Down