CSS Display

• The display property is one of the most fundamental CSS properties, and it controls how an element is rendered on the page. 

Basic display Property Syntax:

element {
    display: value;
}

Display Property Values in CSS:

display: inline

• This value makes an element an inline-level element, meaning it only takes up as much width as necessary and does not start on a new line. Elements like <span> and <a> are inline-level by default.

Example:

<div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    <span>This is an inline lement</span> Modi eaque debitis eos quod labore
    maiores delectus asperiores voluptatem voluptas soluta!
</div>

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-size: 2rem;
}
div {
max-width: 600px;
}
span {
background-color: #006100;
}

Output:

display: block

• This value makes an element a block-level element, meaning it takes up the full width of its parent container and starts on a new line. Elements like <div>, <p>, and <h1> are block-level by default.

Example:

span {
display: block;
background-color: #006100;
}

Output:

display: inline-block:

• inline-block: This value combines features of both block and inline. It allows elements to have block-level properties like setting width and height while remaining inline in the flow of content.

Example:

span {
display: inline-block;
background-color: #006100;
width: 140px;
height: 140px;
} 

Output:

display: none:

• none: This value hides the element, making it completely invisible and taking up no space on the page.

Example:

span {
display: none;
background-color: #006100;
width: 140px;
height: 140px;
}

Output: