How to make Inline-Level element into Block-Level Element?

To change an Inline-level Element into a Block-level Element, you can use the display property in CSS. The display property allows you to specify the type of box used for an HTML element’s layout. Here’s how you can make an inline-level element into a block-level element:

Using display: block;

This CSS rule will apply the display: block; property to elements with the class .inline-to-block, making them behave like block-level elements. Block-level elements typically start on a new line and take up the full width of their container.

Syntax:

/* Changing an inline-level element to a block-level element */
.inline-to-block {
  display: block;
}

Using display: inline-block;

If you want a combination of inline and block behavior, you can use display: inline-block;. This makes the element inline-level with block-level characteristics:

Syntax:

/* Changing an inline-level element to an inline-block element */
.inline-to-inline-block {
  display: inline-block;
}