Result for display block
Display Block
Display Block
CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
CSS Display is most important property of CSS for a website layout structure. A div/p/h1-h6 or others HTML Tag is show or hide it depend it CSS Display. By default CSS Display property type is : none.
By this tutorials you can learn
1) How to use CSS Display?
2) Kinds of CSS Display Property type?
CSS Display use in a style code area - like: display: none;
1) display : none; 2) display : block; 3) display : inline, 4) display : inline-block, 5) display : list-item, 6) display : table;
1) Display None: Display none means hidden a div/p or any HTML tag. Its alternative use of visibility: hidden;
<!DOCTYPE html>
<html>
<head>
<title>CSS Dispaly with NONE Property Type</title>
<style type="text/css">
.div1
{
width: 50%;
height: 150px;
background: #333;
border:1px solid red;
color:#fff;
float: left;
display: none;
}
</style>
</head>
<body>
<div class="div1">
Div using by widht and height px
</div>
</body>
</html>
There are no Output for display none property type.
2) Display Block : Display block display a div as block. Heading and paragraph tag default display block.
<!DOCTYPE html>
<html>
<head>
<title>CSS Dispaly with BLOCK Property Type</title>
<style type="text/css">
.maindiv
{
width: 50%;
height: 250px;
background: #eee;
border:1px solid red;
float: left;
}
.seconddiv
{
min-height: 30px;
display: block;
border:1px solid green;
float: left;
margin: 8px;
padding: 5px;
}
</style>
</head>
<body>
<div class="maindiv">
<p align="center">Result for display block</p>
<div class="seconddiv">
Display Block
</div>
<div class="seconddiv">
Display Block
</div>
</div>
</body>
</html>
Result for display block
3) Display Inline : Display inline display a div as inline. Inline means if you use this property the result display is same line that means TEXT OR DIV then show INLINE DIV
<!DOCTYPE html>
<html>
<head>
<title>CSS Dispaly with INLINE Property Type</title>
<style type="text/css">
.maindiv2
{
width: 50%;
height: 250px;
background: #eee;
border:1px solid red;
float: left;
}
.seconddiv2
{
min-height: 30px;
display: inline;
border:1px solid green;
float: left;
margin: 8px;
padding: 5px;
}
</style>
</head>
<body>
<div class="maindiv2">
<p align="center">Result for display inline</p>
<div class="seconddiv2">
Display Inline
</div>
<div class="seconddiv2">
Display Inline
</div>
</div>
</body>
</html>
Result for display inline
Display Block4) Display Table : Display table display a div as table. Nested elements should be displayed as table-row and table-cell.
<!DOCTYPE html>
<html>
<head>
<title>CSS Dispaly with TABLE Property Type</title>
<style type="text/css">
.maindiv3
{
width: 50%;
height: 250px;
background: #eee;
border:1px solid red;
float: left;
}
.seconddiv3
{
min-height: 30px;
display: table;
border:1px solid green;
float: left;
margin: 8px;
padding: 5px;
}
</style>
</head>
<body>
<div class="maindiv3">
<p align="center">Result for display table</p>
<div class="seconddiv3">
Display Table
</div>
<div class="seconddiv3">
Display Table
</div>
</div>
</body>
</html>
Result for display table
Display Block4) Display List Item : Display list-item display a div as list-item. Nested elements should be displayed as list-item-row and list-item-cell.
<!DOCTYPE html>
<html>
<head>
<title>CSS Dispaly with LIST ITEM Property Type</title>
<style type="text/css">
.maindiv4
{
width: 50%;
height: 250px;
background: #eee;
border:1px solid red;
float: left;
}
.seconddiv4
{
min-height: 30px;
display: list-item;
border:1px solid green;
float: left;
margin: 8px;
padding: 5px;
}
</style>
</head>
<body>
<div class="maindiv4">
<p align="center">Result for display list-item</p>
<div class="seconddiv4">
Display List Item
</div>
<div class="seconddiv4">
Display List Item
</div>
</div>
</body>
</html>
Result for display list-item