Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Block-level and inline describe how a box is laid out by default in CSS, not what kind of element an HTML tag is. Block-level boxes stack one after another in the block direction. Inline-level content flows along a line and wraps into line boxes. Whether a tag is a paragraph, a link or an emphasis marker is decided by its meaning and its content model, and CSS can change how that tag looks without changing what it is.
How block and inline layout work in normal flow
“Normal flow” is the default layout a browser applies when no positioning or floating rules are involved. In that mode, every box is either block-level or inline-level, and the two behave differently.
Block-level boxes
Block-level boxes are laid out one after another in the block direction. In a horizontal writing mode such as English, that direction is vertical, so each block box normally starts on a new line and stacks beneath the previous one. Vertical space between neighbouring blocks is affected by margins, and in a block formatting context adjoining vertical margins may collapse into one.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Inline-level boxes
Inline-level content participates in inline formatting. Text, inline boxes and replaced elements such as images are arranged into line boxes that run in the inline direction, which is left to right in English. When a line is full, the content wraps onto the next line box. Most text sequences are inline-level by default, which is why a sentence inside a paragraph does not start a new block.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Why “new line” depends on writing mode
The common explanation that block elements begin a new line and inline elements stay on the same line is accurate only for horizontal writing modes. The block and inline directions follow the writing mode of the document. In a vertical writing mode, such as one used for certain Japanese or Chinese layouts, block boxes stack horizontally and inline content runs top to bottom. Any rule that talks about lines or stacking should name the writing mode it assumes.
Default examples: p, div, a and span
The table below compares the defaults that most introductory material uses. These are starting points. Author stylesheets and user-agent stylesheets can change them.
| Aspect | Block-level default | Inline-level default |
|---|---|---|
| Typical elements | <p> and <div> |
<a> and <span> |
| Placement in horizontal English text | Boxes stack vertically, each starting on its own line | Content flows left to right and is broken into line boxes |
| Effect of a width setting | Applies to the box in the block direction, which is the usual case for a paragraph | Does not apply to a non-replaced inline box in the same way; a width on an inline element is ignored in normal flow |
| Common CSS override | display: inline removes the line break before and after the box |
display: block or display: inline-block gives the box block-like behaviour |
| What the HTML meaning depends on | Element semantics and content model | Element semantics and content model |
The <div> and <span> elements are generic containers. They are useful when no more specific element describes the content, but they carry no meaning of their own, so they should not be used where a heading, paragraph, list or link is the accurate choice.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallHTML content categories: flow and phrasing
The HTML Living Standard does not sort elements into block and inline groups. It assigns each element to zero or more content categories. The broad categories include flow content, sectioning content, heading content, phrasing content, embedded content, interactive content and metadata content. These categories describe what content an element may contain and where it may appear. They are a different system from CSS display values.
What phrasing content means
The standard defines phrasing content as the text of the document, together with the elements that mark up that text at the intra-paragraph level. Links, emphasis, inline code and images are typical phrasing elements. Most elements in this category can contain only phrasing content, not arbitrary flow content such as headings, lists or sections.
The paragraph element as an example
The p element is a useful test case because it is block-level by default in CSS and yet has a restricted content model. The WHATWG HTML Standard describes it as flow content whose content model is phrasing content, and it states: “The p element represents a paragraph.” The same section adds that paragraphs are usually shown as blocks of text separated by blank lines, but “a style sheet or user agent would be equally justified in presenting paragraph breaks in a different manner, for instance using inline pilcrows (¶).” That sentence makes the point directly: the visual form of a paragraph is a presentation choice, while the paragraph itself is a meaning.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Why “block tags cannot hold inline tags” is only shorthand
Many tutorials teach that block elements can contain inline elements and that inline elements cannot contain block elements. That rule is a historical shorthand, and it is not a complete test of validity. A p can hold a link or an emphasis element because both are phrasing content. A p cannot hold a heading or a list, even though a div can hold both, because the content model of p is narrower. To decide whether a nesting is valid, read the content model of the parent element rather than checking whether it is block or inline.
Free tools Windows power users keep installed
One-click scans. No signup required.
What the CSS display property changes
The CSS display property sets an element’s inner and outer display types, which control how its box takes part in layout. Changing it changes the presentation of the element. It does not change the HTML content model, the element’s meaning, or whether the markup is valid.
Best Value
Example: a semantic element displayed as a block
MDN Web Docs uses strong { display: block; } as an example of a rule that changes how a semantic emphasis element is laid out. The element stays a <strong> and keeps its meaning for assistive technology and search engines. Only its box behaves like a block. The same logic applies to any element: the HTML tag is the meaning, and the display value is the layout.
Example: inline-block as a middle state
inline-block produces a block box that flows with the surrounding content as if it were a single inline box. It is useful for a row of buttons or tags that should sit on one line but need block-like height and width. It is still a presentation choice, and the content inside it must still follow the content model of its element.
Choosing tags and layout in practice
A reliable workflow separates the decision about what the content is from the decision about how it looks.
Quick Recap
- Choose the element by meaning. Use
pfor a paragraph,afor a link,strongfor importance anddivorspanonly when no meaningful element fits. - Check the element’s content model in the WHATWG HTML Standard before nesting. If the parent accepts only phrasing content, put links and emphasis inside it and move headings, lists and sections outside it.
- Set the layout in CSS. In your stylesheet, use
display, margins, widths and flex or grid rules to arrange the element. - Test the result with the display value you intended. If a box does not sit where you expect, inspect its computed
displayvalue in your browser’s developer tools before changing the markup.
Sources and dates
- MDN Web Docs, “Block (CSS) – Glossary,” last modified 7 November 2025.
- MDN Web Docs, “Block and inline layout in normal flow,” last modified 24 August 2026.
- MDN Web Docs, “Inline-level content,” last modified 30 August 2026.
- MDN Web Docs, “display” CSS property, continuously maintained.
- WHATWG, HTML Living Standard, “DOM and content categories,” continuously maintained.
- WHATWG, HTML Living Standard, “Grouping content and the p element,” continuously maintained.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
