css
  1. css-display
PreviousNext

CSS Display

  • The display property in CSS defines how an element is rendered on the webpage.
  • It determines the layout behavior of an element, affecting its visibility, dimensions, and flow within the document.

Basic Usage of the display Property

The display property can take various values:

  • display: block;: Renders the element as a block-level element, taking up the full width available.
  • display: inline;: Renders the element as an inline element, allowing it to flow within the content.
  • display: inline-block;: Combines the characteristics of both block and inline elements, allowing for block-like behavior with inline formatting.
  • display: none;: Hides the element from the display, making it invisible and taking up no space in the layout.
  • display: flex;: Establishes a flex container, enabling a flex context for its direct children.
  • display: grid;: Establishes a grid container, allowing for grid layout creation.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .block {
    display: block;
    width: 50%;
    background-color: lightblue;
    margin: 0 auto;
    padding: 20px;
  }

  .inline {
    display: inline;
    background-color: lightgreen;
    padding: 10px;
  }
</style>
</head>
<body>

<div class="block">Block element with 50% width</div>
<span class="inline">Inline element</span>

</body>
</html>
Try Playground

Benefits of Using display Property

  • Control Over Layout: Allows for different layout structures like block, inline, flex, or grid.
  • Visibility Management: Control the visibility and space elements occupy on the page.
  • Responsive Design: Enables the creation of responsive and adaptive layouts.

Best Practices for Using display

  • Understand Element Behaviors: Choose the appropriate display value based on the desired element behavior.
  • Combine Values: Combine various display values for complex layouts using flexbox or grid for better structure.

Mastering the display property provides the ability to create diverse and responsive layouts, ensuring a more efficient and visually appealing web design.

HeightPosition
Published on: