The display property in CSS is used to control how an HTML element is displayed on a web page. It determines the box type and layout behaviour of the element. There are several values for the display property, and three common values are block, inline, and inline-block.
The display: block; property value in CSS is used to format an HTML element as a block-level box. Block-level elements create a rectangular block that takes up the full available width of its parent container and starts on a new line before and after the element. This is in contrast to inline-level elements, which do not create line breaks and only take up as much width as necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Display Block</title>
</head>
<body>
<h1>Welcome TO JTC</h1>
<div class="box">
<div class="block1">
This is first Block
</div>
<div class="block2">
This is second Block
</div>
<div class="block3">
This is third Block
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h1, p{
font-family: Arial, Helvetica, sans-serif;
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: rgb(3 82 131);;
}
.box{
width: 200px;
box-sizing: border-box;
text-align: center;
color: white;
margin-left: 50px;
}
.block1{
display: block;
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: #26495c;
}
.block2{
display: block;
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: #c4a35a;
}
.block3{
display: block;
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: #c66b3d;
}
.block2{
display: block;
height: 100px;
background-color: #c4a35a;
}
.block3{
display: block;
height: 100px;
background-color: #c66b3d;
}
In this example, 3 div elements with the class block1 , block2 and block3 will be displayed as a block-level box. All div element have a width of 200px, a height of 100px, a 10px margin around it, and 10px padding within it.
Block-level elements are commonly used for containing other elements and creating structured layouts. Some common block-level elements include headings (<h1> to <h6>), paragraphs (<p>), divisions (<div>), lists (<ul>, <ol>), and more. They stack vertically on top of each other, creating clear visual separations between elements.
Remember that the display: block; property value is just one of several ways to control how elements are displayed and laid out on a webpage. Using it appropriately helps you achieve the desired structure and design for your web content.
The display: inline; property value in CSS is used to format an HTML element as an inline-level box. Inline-level elements do not create line breaks before or after themselves and only take up as much width as necessary to contain their content. This is in contrast to block-level elements, which create new lines before and after themselves and take up the full width available within their parent container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Display Inline</title>
</head>
<body>
<h1>Welcome TO JTC</h1>
<div class="box">
<div class="inline1">
This is first block.
</div>
<div class="inline2">
This is second block.
</div>
<div class="inline3">
This is third block.
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h1, p{
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
font-size: 42px;
font-weight: bold;
color: rgb(3 82 131);;
}
.box{
text-align: center;
color: white;
margin-left: 50px;
}
.inline1{
display: inline;
height: 300px;
margin: 10px;
padding: 10px;
background-color: #26495c;
}
.inline2{
display: inline;
height: 300px;
margin: 10px;
padding: 10px;
background-color: #c4a35a;
}
.inline3{
display: inline;
height: 300px;
margin: 10px;
padding: 10px;
background-color: #c66b3d;
}
Inline-level elements are commonly used for small pieces of content that should appear within a line of text or adjacent to other inline-level elements. Examples of inline-level elements include <span>, <a>, <strong>, <em>, and more.
Remember that using the display: inline; property value appropriately helps you control the flow of text and the positioning of elements within your web content.
The display: inline-block; property value in CSS combines the characteristics of both display: inline; and display: block;. It allows an element to be treated as an inline-level element while still maintaining the block-level properties like setting a width, height, margins, and padding. This makes display: inline-block; useful for creating elements that flow inline with text while having block-like styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Display Inline-Block</title>
</head>
<body>
<h1>Welcome TO JTC</h1>
<div class="box">
<div class="inline1">
This is first block.
</div>
<div class="inline2">
This is second block.
</div>
<div class="inline3">
This is third block.
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h1, p{
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
font-size: 42px;
font-weight: bold;
color: rgb(3 82 131);;
}
.box{
text-align: center;
color: white;
margin-left: 50px;
width: 500px;
}
.inline1{
display: inline-block;
width: 150px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #26495c;
}
.inline2{
display: inline-block;
width: 150px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #c4a35a;
}
.inline3{
display: inline-block;
width: 300px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #c66b3d;
}
The display: inline-block; property value is particularly useful when you want to create elements that align horizontally within a line of text or content, while still retaining the block-level behavior for styling and layout control.
Common use cases for display: inline-block; include creating buttons, navigation links, or any other elements that should be horizontally aligned but still have padding, margins, and other block-level styling characteristics.
The display: none; property value in CSS is used to completely remove an HTML element from the display. This effectively hides the element and the space it would have occupied is also removed from the layout flow. It's a way to hide elements from users without affecting the structure of the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Display None</title>
</head>
<body>
<h1>Welcome TO JTC</h1>
<div class="box">
<div class="inline1">
This is first block.
</div>
<div class="inline2">
This is second block.
</div>
<div class="inline3">
This is third block.
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h1, p{
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
font-size: 42px;
font-weight: bold;
color: rgb(3 82 131);;
}
.box{
text-align: center;
color: white;
margin-left: 50px;
width: 500px;
}
.inline1{
display: inline-block;
width: 150px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #26495c;
}
.inline2{
display: inline-block;
width: 150px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #c4a35a;
}
.inline3{
display: none;
width: 300px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #c66b3d;
}
In this example, the div element with the class inline3 will not be displayed on the webpage, and its space will be removed from the layout.
Using display: none; can be useful when you want to dynamically show or hide elements based on user interactions or specific conditions. It's often used in combination with JavaScript to create interactive and responsive web pages. Keep in mind that when an element is set to display: none;, it is not accessible to users, including screen readers, so use it judiciously.
The visibility: hidden; property value in CSS is used to hide an HTML element from the display while still maintaining its space in the layout. Unlike display: none;, which completely removes the element from the layout, visibility: hidden; hides the element's content but preserves the space it occupies.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Visibility hidden</title>
</head>
<body>
<h1>Welcome TO JTC</h1>
<div class="box">
<div class="inline1">
This is first block.
</div>
<div class="inline2">
This is hidden block.
</div>
<div class="inline3">
As you can see div element with class inline2 is hidden but taking up the space.
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h1, p{
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
font-size: 42px;
font-weight: bold;
color: rgb(3 82 131);;
}
.box{
color: white;
margin-left: 50px;
}
.inline1{
display: inline;
width: 250px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #26495c;
}
.inline2{
display: inline;
width: 250px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #c4a35a;
visibility: hidden;
}
.inline3{
display: inline;
width: 250px;
height: 100px;
color: white;
border: none;
margin: 5px;
background-color: #c66b3d;
}
In this example, the div element with the class inline2 will be hidden from view, but the space it would have occupied in the layout will still be reserved.
The difference between display: none; and visibility: hidden;:
display: none;: Removes the element from the layout entirely, including its space. It's as if the element doesn't exist on the page.
visibility: hidden;: Hides the element's content while keeping its space in the layout. The element is not visible, but its effects on layout, such as space and positioning, remain.
Use visibility: hidden; when you want to hide elements without affecting the overall structure and layout of the webpage. It's commonly used in scenarios where you want to show or hide elements dynamically while preserving the layout flow.