CSS Display Properties

Introduction

In this tutorial, we will explore the fundamental CSS display property, which is crucial for controlling how HTML elements are laid out on a webpage. Understanding display properties is essential for creating responsive and well-structured layouts.

The display property determines the type of box an element generates in the document layout. Different values of the display property can change how an element behaves in terms of its size, positioning, and flow within the page.

Concept

Block Elements

Block elements are typically displayed as a block-level box, meaning they start on a new line and take up the full width available until the end of their containing element. Examples of block elements include <div>, <p>, <h1> to <h6>, and <ul>.

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary. They flow horizontally like text. Examples of inline elements include <span>, <a>, and <strong>.

Flexbox

Flexbox is a layout mode that provides a more efficient way to align, distribute, and size box elements inside a container, even when their size is unknown or dynamic. It is particularly useful for creating responsive designs.

Examples

Let's explore each of these display properties with practical examples.

Block Elements

Here’s an example of how block elements behave:

1<div style="border: 1px solid black; padding: 10px;">
2<h1>This is a heading</h1>
3<p>This is a paragraph.</p>
4</div>

+-----------------------+
|                       |
|   This is a heading   |
|                       |
|   This is a paragraph.|
|                       |
+-----------------------+

Inline Elements

Here’s an example of how inline elements behave:

1<div style="border: 1px solid black; padding: 10px;">
2<span>This is a span.</span>
3<a href="#">This is a link</a>
4<strong>This is strong text.</strong>
5</div>

+-----------------------+
|                       |
|   This is a span.     |
|   This is a link      |
|   This is strong text.|
|                       |
+-----------------------+

Flexbox

Here’s an example of how flexbox can be used to create a responsive layout:

1<div style="display: flex; border: 1px solid black; padding: 10px;">
2<div style="flex: 1; background-color: lightblue;">Item 1</div>
3<div style="flex: 2; background-color: lightgreen;">Item 2</div>
4<div style="flex: 1; background-color: lightcoral;">Item 3</div>
5</div>

+-----------------------+
|   Item 1    |   Item 2    |   Item 3    |
+-----------------------+

What's Next?

In the next section, we will dive into HTML Forms. Understanding how to create and style forms is essential for building interactive web applications.

Stay tuned!