HTML Display Block

Introduction to HTML Display Block

HTML Display Block is one of the most important position properties in HTML, which is responsible for placing block-level elements into the display block. While designing α webpage, it is always important to arrange elements properly in α specific position. Setting α proper position to the layout is one of the most important tasks. By default, it took display property as inline. This will always start with α new line and stretch elements from left to right to occupy full-width space. One can set height and width properties to the block-level elements, and it is possible to include other inline or block elements within it.

Syntax:

Start Your miễn phí PM Development Course

Website development, programming languages, PM testing & others

  • Each and every element placed on the webpage at α specific location. The property value helps us to define how it should be displayed on the webpage; it will be as follows:

display :block;

  • The syntax for displaying HTML display block with position value is as follows:

position :value;

  • In the above syntax position is the placement area where actually elements are going to place. Into the value, we can use Block for displaying block-level elements. So it will be going to use like :

position :block;

  • Those HTML Block contains elements like <divvàgt;, <ρvàgt;, <sectionvàgt;, as well as one can use inline elements within the display block.
  • With the help of CSS, one can define display property with some specified values like :

display: [<display-outside> , <display-inside>] [<display – listitem>, <display -internal>, <display-box>]

There are different display values for HTML as follows:

Xem Thêm  Hướng dẫn cơ bản về Python cho Vòng lặp với hàm range () - cho vòng lặp python phạm vi

1. none value

{
display:none;
}

2. inline value

{
display:inline;
}

3. block value

{
display:block;
}

4. inline- block value

{
display : inline- block;
}

All the above values help us to set and control the layout; most of the time, values for layout are either inline or block. The display block starts with α new line covering the container’s full width to put elements on the website page in the HTML display block. Block-level elements don’t allow you to use other block elements within them.

How does Block Display in HTML?

  • In this format, it uses boxes that are placed one after another in the vertical direction. It will start from the top of the containing block.
  • Those blocks are managed with vertical distance in between them using equivalent space, which is known as margin property in the CSS.
  • In this display block formatting process, every box’s left outer side attached to the left side of its containing block. The same thing will happen with the right edges of containing blocks.
  • Another way to define display block in HTML is to put down block elements into the horizontal direction, same as English. It will arrange the layout vertically below one by one.
  • As we are using margins, it helps for creating space between two boxes or elements, which will separate elements from each other.
  • Block-level elements will occupy all the space in an inline direction, so our elements get separated into their containing block.
  • As we know, we can set height, width property to the layout in it, so it helps to put blocks below each other one by one.
Xem Thêm  Biểu thức chính quy trong Python với các ví dụ - nhập biểu thức chính quy python

Examples of HTML Display Block

Given below are the examples of html display block:

Example #1

This is α normal example showing how HTML display block property going to be used in the HTML code is as follows:

Code:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<stylevàgt;
.block_demo{
border: 2px solid red;
width:50%;
display:block;
}
</stylevàgt;
<bodyvàgt;
<h4vàgt;Menu of Color Names:</h4vàgt;
<div class="block_demo">
<ulvàgt;
<livàgt;Redvàlt;/livàgt;
<livàgt;Greenvàlt;/livàgt;
<livàgt;Bluevàlt;/livàgt;
<livàgt;Orangevàlt;/livàgt;
<livàgt;Purplevàlt;/livàgt;
<livàgt;Pinkvàlt;/livàgt;
</ulvàgt;
</divvàgt;
<h4vàgt;Menu of Mobile Brands:</h4vàgt;
<div class="block_demo">
<olvàgt;
<livàgt;Applevàlt;/livàgt;
<livàgt;SAMSUNGvàlt;/livàgt;
<livàgt;NOKIAvàlt;/livàgt;
<livàgt;MOTOROLAvàlt;/livàgt;
<livàgt;LENOVOvàlt;/livàgt;
<livàgt;Smarphone OPPOvàlt;/livàgt;
</olvàgt;
</divvàgt;
</bodyvàgt;
</htmlvàgt;

Output:

HTML Display Block 1

Example #2

In this example, we are going to create 3 equal blocks and showing data in between them using the Display block as follows:

Code:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;HTML Display boxvàlt;/titlevàgt;
<stylevàgt;
#block1{
height: 100px;
width: 400px;
background: orange;
display: block;
}
#block2{
height: 100px;
width: 400px;
background: white;
display: block;
}
#block3{
height: 100px;
width: 400px;
background: lightgreen;
display: block;
}
.flag {
margin-left:20px;
font-size:40px;
font-weight:bold;
color:blue;
}
.dùng thử {
font-size:20px;
margin-left:20px;
}
.main {
margin:50px;
text-align:center;
border: 1px solid black;
}
</stylevàgt;
</headvàgt;
<bodyvàgt;
<div class = "flag">National Flag of Indiavàlt;/divvàgt;
<div class = "demo">Meaning of National Flagvàlt;/divvàgt;
<div class = "main">
<div id="block1">The saffron color of the flag indicates α symbol of courage and sacrifice. This is also known as Bhagwa color. It’s for renunciation . It represents fire. </divvàgt;
<div id="block2">The white color of our flag represents honesty, peace, purity. It focus on importance of maintaining peace in the country.
<img src="AC.png" style="height:60px; width:70px;">
</divvàgt;
<div id="block3">The green color represents faith and chivalry. It’s for nature. It is α symbol of prosperity and life. It also used for representing auspiciousness of the Indian Motherland..</divvàgt;
</divvàgt;
</bodyvàgt;
</htmlvàgt;

Output:

Xem Thêm  Python .sort () - Cách sắp xếp danh sách trong Python - danh sách sắp xếp trong python

HTML Display Block 2

Example #3

This example includes elements like Header, dưới cùng của trang, section, sidebar, etc. in HTML Display block are as follows:

Code:

<!DOCTYPE htmlvàgt;
<html lang="en">
<headvàgt;
<titlevàgt;HTML Display Block</titlevàgt;
<stylevàgt;
body {
margin: 0;
}
.header {
padding: 10px;
text-align: center;
background-color:cadetblue;
color: white;
}
.navbar {
overflow: hidden;
background-color:darkkhaki;
}
.navbar α {
float: left;
display: block;
color: white;
text-align: center;
padding: 10px 10px;
}
.navbar α.right {
float: right;
}
.navbar α:hover{
background-color: #eee;
color: black;
}
.row {
display: flex;
flex-wrap: wrap;
}
.section {
flex: 10%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 80%;
background-color: white;
padding: 20px;
}
.dưới cùng của trang{
padding:3px;
background-color:darkcyan;
width:100%;
}
</stylevàgt;
</headvàgt;
<bodyvàgt;
<div class="header">
<h1vàgt; HEADER of Webpagevàlt;/h1vàgt;
</divvàgt;
<div class="navbar">
<α href="#">Homevàlt;/avàgt;
<α href="#">About USvàlt;/avàgt;
<α href="#">Servicesvàlt;/avàgt;
<α href="#">Contactvàlt;/avàgt;
<α href="#" class="right">SignUpvàlt;/avàgt;
</divvàgt;
<div class="row">
<div class="section">
<h2vàgt;Sidebar comes herevàlt;/h2vàgt;
</divvàgt;
<div class="main">
<h2vàgt;</h2vàgt;
<ρvàgt;</ρvàgt;
<brvàgt;
<div class="row">
<div class="section" style="margin-top:-50px;">
<h2vàgt;(Example of section)</h2vàgt;
</divvàgt;
</divvàgt;
</divvàgt;
<div class="footer">
<ρvàgt;Dưới cùng của trangvàlt;/ρvàgt;
</divvàgt;
</divvàgt;
</bodyvàgt;
</htmlvàgt;

Output:

HTML Display Block 3

Conclusion

From all the above information, we came to know that, HTML display block property in HTML helps us to set our layout in proper structure. Those blocks in the layout can be put either vertical or horizontal direction one after another. It include elements like <divvàgt;, <sectionvàgt;, <formvàgt;. <headervàgt;, <dưới cùng của trangvàgt;, <h1vàgt;-<h6vàgt;, etc.

Recommended Articles

This is α guide to HTML Display Block. Here we discuss the introduction, examples, and how does block display in HTML. You may also have α look at the following articles to learn more –

0

Shares

Share

Viết một bình luận