CSS: Display

The display property in CSS is fundamental for controlling the layout and rendering behavior of elements on a webpage. It specifies how an element should be displayed in the document flow, affecting its box type, visibility, and interaction with other elements. Here's an overview of the display property and its various values:

Block Level Elements (display: block;):

• Elements with display: block; create a block-level box that extends the full width of its containing element and starts on a new line.
• Common block-level elements include <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, and others.

div {
   display: block;
}
p {
   display: block;
}

Inline Elements (display: inline;):

• Elements with display: inline; generate an inline box and do not start on a new line. They flow alongside adjacent elements.
• Common inline elements include <span>, <a>, <strong>, <em>, <img>, <input>, and others.

span {
   display: inline;
}
a {
   display: inline;
}

Inline-Block Elements (display: inline-block;):

• display: inline-block; combines aspects of inline and block elements. It creates an inline-level box that respects margins and padding and can have a specified width and height.
• It's often used for creating inline elements with block-like behavior, such as navigation menus or button groups.

.menu-item {
   display: inline-block;
   margin-right: 10px; /* Add space between inline-block elements */
}
.btn {
   display: inline-block;
   width: 100px;
   height: 40px;
   background-color: blue;
   color: white;
   text-align: center;
   line-height: 40px;
}

None (display: none;):

• display: none; hides an element completely from the rendering, and it won't take up any space in the layout.
• This property is often used for hiding and showing elements dynamically with JavaScript or for accessibility purposes.

.hidden-element {
   display: none;
}

Table-Related Values (display: table;, display: table-cell;, display: table-row;):

• These values are used to create table-like structures without using actual <table> elements.
• display: table; creates a block-level table container, display: table-row; creates a row, and display: table-cell; creates a table cell.

.table-container {
   display: table;
}
.table-row {
   display: table-row;
}
.table-cell {
   display: table-cell;
}

Flexbox (display: flex;):

• display: flex; enables Flexbox layout, allowing for flexible and responsive alignment and distribution of elements within a container.
• Flexbox is powerful for creating complex and responsive layouts with ease.

.flex-container {
   display: flex;
   justify-content: space-between; /* Distribute items with space between them */
}
.flex-item {
   flex: 1; /* Grow and shrink equally */
}

Grid (display: grid;): 

• display: grid; enables CSS Grid layout, which provides a two-dimensional grid system for arranging elements in rows and columns.
• Grid layout is excellent for creating advanced and customizable layouts.

.grid-container {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr; /* Three columns with fractional widths */
   grid-gap: 10px; /* Gap between grid items */
}
.grid-item {
   background-color: #ccc;
   padding: 10px;
}

These are some of the key values of the display property in CSS. Choosing the appropriate value for display helps in creating the desired layout and behavior for elements on your webpage.