1. display: block;
Defines the element as a block-level element. In CSS, the display property is used to control how an element is displayed on the web page. The display: block; property value specifies that the element should generate a block-level element box.
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><style>.block {display: block;background-color: #ffcccb;padding: 10px;}</style><title>display properties</title></head><body><div class=”block”>This is a block-level element.</div></body></html>
Output:
2. display: inline;
Defines the element as an inline-level element. In CSS, the display property is used to define how an element should be displayed on the web page. The display: inline; property is used to make an element behave like an inline element.
Example:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <style> .inline { display: inline; background-color: #aeeeee; padding: 10px; } </style> <title>display properties</title> </head> <body> <span class=”inline”> This is an inline-level element. </span> </body> </html>
Output:
3. display: inline-block;
Defines the element as a inline-block element. The display: inline-block property in CSS allows elements to be displayed inline like inline elements, but they can also have a width, height, margin, padding, and border like block elements. This property is useful when you want elements to flow like inline elements (i.e., they will appear on the same line as other inline elements and will wrap to a new line when the container width is exceeded) but also want to control their size and spacing like block elements. Here’s a brief explanation of each term:
display: This CSS property determines how an element is displayed in the document.inline-blockis one of the possible values.inline-block: This value combines aspects of both inline and block display. Elements with this display value are treated as inline-level elements (like<span>or<a>) but can have block-like properties such as width, height, margin, padding, and border.
Example:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <style> .inline-block { display: inline-block; background-color: #98fb98; width: 100px; padding: 10px; } </style> <title>display properties</title> </head> <body> <span class=”inline-block”> This is an inline-block element. </span> </body> </html>
Output:
4. display: flex;
Defines a flex container.
Example:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <style> .flex-container { display: flex; background-color: #d3d3d3; } </style> <title>display properties</title> </head> <body> <div class=”flex-container”> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> </body> </html>
Output:
5. display: none;
display: none; is a CSS property used to hide an element from the webpage entirely. When applied to an element, it removes it from the document flow, meaning that it won’t take up any space on the webpage and won’t be visible to the user. This is often used when you want to hide elements dynamically based on certain conditions or interactions, rather than simply making them invisible with opacity or visibility properties.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body><h1>visible heading</h1>
<h1 class=”hidden”>invisible hidden heading</h1></body>
</html>
Output:
