Display Properties
Explore the CSS display property and its impact on page rendering and layout.
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
blockdisplay, making it start on a new line and occupy full width by default. ...