Block vs. Inline: A Simple Guide to CSS Layout Behavior

What makes some HTML elements sit on a new line while others stay in a row?

CSS controls how elements appear on a web page using different display types. The two main categories are block vs inline. Block elements take up the full width, while inline elements stay within a line.

Knowing the difference helps you style layouts correctly. Without it, elements may not behave as expected.

Let’s break it down and make CSS layouts easier to understand!

What are Block and Inline Elements?

Block Elements

A block-level element takes up the entire width of its container, automatically forcing a new line before and after it. These block elements stretch across the page, making them useful for structuring content in sections.

Common Block Elements

• <div>

• <p> (for a paragraph)

• <h1> - <h6>

• <ul> and <ol> (which contain list items)

• <section>

• <article>

Example of a Block Element

1<div style="background-color: lightgray; padding: 10px; margin: 10px;">
2    This is a block-level element.
3</div>

​

Here, the <div> tag takes up the full width of the container and moves any next element to a new line.

Inline Elements

An inline element only takes up as much width as necessary. It does not start on a new line and can sit inside a paragraph or other inline container without breaking the document's normal flow.

Common Inline Elements

• <span>

• <a> (used for a link)

• <strong> and <em>

• <img>

• <input> (for form elements like text fields and buttons)

Example of an Inline Element

1<p>This is a <span style="color: blue;">styled inline span</span> inside a paragraph.</p>

​

In this example, the <span> tag does not disrupt the line structure of the paragraph.

Block vs Inline: Key Differences

Feature	Block Element	Inline Element
Takes up full width	✅	❌
Starts on a new line	✅	❌
Can contain block elements	✅	❌
Can contain inline elements	✅	✅
Affects the flow of text	✅	❌

Block and Inline Boxes in CSS

CSS defines block and inline boxes that control how elements render inside a document. The display type of an HTML element determines its behavior.

Understanding Default Block Elements

Some HTML elements are naturally block level due to their default styles. For example:

1<p>This is a paragraph.</p>
2<div>This is a div.</div>

​

Each block level element starts on its line and occupies the entire width of its container.

Inline Boxes and Their Behavior

An inline element creates an inline box around its content, which does not break the line. These elements sit side by side in a normal flow without causing a line break.

1<p>This is <span style="background-color: yellow;">an inline span</span> inside a paragraph.</p>

​

In this example, the <span> remains within the line instead of breaking into a new line.

The Inline-Block Display Type

The inline-block display type acts like an inline element but allows styling similar to a block element, meaning it can have margin, padding, and width properties.

Example of Display Inline-Block

1<div style="display: inline-block; width: 150px; background-color: lightblue; padding: 10px;">
2    This is an inline-block element.
3</div>
4<div style="display: inline-block; width: 150px; background-color: lightgreen; padding: 10px;">
5    This is another inline-block element.
6</div>

​

Here, both <div> tags behave like inline elements, appearing side by side, but they still respect width, margin, and padding settings.

Modifying Display Types in CSS

Changing Block Elements to Inline

Using CSS, you can override the default behavior of a block-level element and make it behave like an inline element.

1div {
2    display: inline;
3}

​

Now, a <div> behaves like a <span> and will not cause a new line.

Changing Inline Elements to Block

If you need an inline element to behave like a block level element, set its display property to block.

1span {
2    display: block;
3}

​

This forces the <span> to take up the entire width and move to a new line.

Inline vs Block in Different Scenarios

Text Alignment in Inline and Block Elements

When working with text align, inline elements will follow the alignment of their block container.

1div {
2    text-align: center;
3}

​

This centers all inline elements within the block container.

Using Borders and Margins in Block and Inline Elements

• Block elements support all margin, border, and padding properties without restrictions.

• Inline elements can have padding and border, but margin only affects horizontal space.

1span {
2    border: 1px solid black;
3    padding: 5px;
4    margin: 10px; /* Margins apply only horizontally */
5}

​

A border and padding are visible, but the margin does not push other elements vertically.

Block and Inline in Forms

Some input fields are naturally inline elements, but they can be modified using CSS.

1input {
2    display: block;
3    width: 100%;
4}

​

This makes all input fields take up the full width of their container.

Final Thoughts on Block vs Inline

Understanding block and inline elements helps structure HTML documents properly. Knowing when to use block-level elements, inline elements, and inline-block display types ensures better layout control. Adjusting CSS display properties allows for greater fine-tuning of style and positioning.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.