Display Properties

The display property in CSS determines how elements are rendered on a web page. It controls the layout behavior of elements and how they interact with each other. This lesson explores the different display values—block, inline, inline-block, and none—and discusses methods for hiding and showing elements.

Exploring different display values

Let’s understand how various CSS display values, like block, inline, inline-block, and none, affect the layout and behavior of elements on your web page.

Block

Elements with display: block; occupy the full width available and start on a new line. They respect width and height properties and can contain margin and padding.

In the above CSS code:

• Line 2: Sets the element to block display, making it start on a new line and occupy full width by default. ...