CSS Display

CSS display is a property that controls how an HTML element is rendered on a web page. Here are some common values of the display property and what they do:

1. none: The element is completely removed from the page and does not take up any space.
2. block: The element is displayed as a block-level element, taking up the full width of its parent container and creating a new line after it.
3. inline: The element is displayed inline, allowing other elements to be displayed on the same line.
4. inline-block: The element is displayed inline, but can have a width and height set, and can have padding and margins.
5. flex: The element is displayed as a flexible container, allowing its child elements to be positioned and sized according to flexible rules.
6. grid: The element is displayed as a grid container, allowing its child elements to be positioned in a grid layout.
7. table: The element is displayed as a table.
8. list-item: The element is displayed as a list item.

By default, many HTML elements have a specific display value assigned to them. For example, div elements are displayed as block-level elements, and span elements are displayed inline. However, the display property can be used to override these default values and control the layout and positioning of elements on a web page.

Display Inline

The CSS display: inline property is used to make an element an inline-level element, allowing it to appear next to other inline-level elements. When an element is set to display: inline, it takes up only as much width as necessary, and does not create a new line after it. Some common elements that are set to display: inline by default are a, span, and img.

Here’s an example of how to use the display: inline property in CSS:

cssCopy codespan {
  display: inline;
  background-color: yellow;
  padding: 5px;
}

In this example, the span element will be displayed inline and have a yellow background color and 5 pixels of padding on all sides. Because the span element is inline, it will appear next to any other inline-level elements that come before or after it, without creating a new line. This makes it useful for adding small bits of styling to specific parts of a block-level element, such as a paragraph.

Display Block

The CSS display: block property is used to make an element a block-level element, allowing it to take up the full width of its parent container and creating a new line after it. When an element is set to display: block, it takes up the entire width of its parent container by default, but its width and height can be changed using the width and height properties. Some common elements that are set to display: block by default are div, p, and h1-h6.

Here’s an example of how to use the display: block property in CSS:

cssCopy codediv {
  display: block;
  background-color: blue;
  color: white;
  padding: 10px;
  margin: 10px;
}

In this example, the div element will be displayed as a block-level element and have a blue background color, white text color, 10 pixels of padding on all sides, and 10 pixels of margin on all sides. Because the div element is a block-level element, it will take up the full width of its parent container by default and create a new line after it. This makes it useful for creating distinct sections of a web page or controlling the layout and positioning of elements within a container.

Display Inline Block

The CSS display: inline-block property is used to make an element an inline-level element that can also have width, height, padding, and margins applied to it, while still allowing it to appear next to other inline-level elements on the same line. When an element is set to display: inline-block, it takes up only as much width as necessary, but its width and height can be changed using the width and height properties. Some common elements that are set to display: inline-block by default are button, input, and select.

Here’s an example of how to use the display: inline-block property in CSS:

cssCopy codebutton {
  display: inline-block;
  background-color: red;
  color: white;
  padding: 10px;
  margin: 10px;
}

In this example, the button element will be displayed as an inline-block element and have a red background color, white text color, 10 pixels of padding on all sides, and 10 pixels of margin on all sides. Because the button element is an inline-block element, it will take up only as much width as necessary, but it can still have padding and margins applied to it. It will also appear next to any other inline-level elements that come before or after it on the same line. This makes it useful for creating buttons or other interactive elements that need to be positioned inline with text or other content.

Display None & Hidden

Both display: none and visibility: hidden are CSS properties that can be used to hide elements from view on a web page, but they work in slightly different ways.

The display: none property removes an element from the document flow entirely. This means that the element is not rendered on the page at all and does not take up any space. Any child elements of the hidden element will also be hidden. This property is commonly used to hide elements that are not needed or that should only be displayed under certain conditions, such as with JavaScript.

Here’s an example of how to use the display: none property in CSS:

cssCopy codediv {
  display: none;
}

In this example, the div element will be hidden from view and will not take up any space on the page.

On the other hand, the visibility: hidden property hides an element from view, but it still takes up space in the document flow. This means that other elements on the page will be positioned as if the hidden element were still there, but it will not be visible to the user. Any child elements of the hidden element will also be hidden. This property is commonly used to hide elements that should still take up space on the page, but that should not be visible to the user.

Here’s an example of how to use the visibility: hidden property in CSS:

cssCopy codediv {
  visibility: hidden;
}

In this example, the div element will be hidden from view, but it will still take up space on the page. Other elements on the page will be positioned as if the hidden div were still there.