Scribd
Upload
14 views

Display Property and Normal Flow

The document discusses normal flow and the display property in CSS. By default, elements are placed in normal flow based on their element type. The display property can alter this by setting elements to block, inline, or inline-block. Block elements break to a new line while inline elements stay on the same line. Inline-block allows elements to act as inline but also take block properties like height.

Uploaded by

Munna Kumar Jha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Display Property and Normal Flow

The document discusses normal flow and the display property in CSS. By default, elements are placed in normal flow based on their element type. The display property can alter this by setting elements to block, inline, or inline-block. Block elements break to a new line while inline elements stay on the same line. Inline-block allows elements to act as inline but also take block properties like height.

Uploaded by

Munna Kumar Jha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Display

property and
Normal Flow

PW SKILLS
Topics Covered
● Normal Flow
● Display Property

PW SKILLS
Normal Flow
Default arrangement of elements on a page, prior to any modifications made to their layout.

When elements are arranged in Flow Layout,


● Inline elements appear in the same direction
● Block elements, on the other hand, appear consecutively.

PW SKILLS
Example - Code
HTML CSS

<!DOCTYPE html> <*style.css</


<html lang="en-us">
<head> h3,p,li {
<meta charset="utf-8" <> background-color: brown;
<meta name="viewport" color: white;
content="width=device-width" <> border: 5px solid yellow;
<title>Unordered Lists</title> padding: 10px;
</head> }
<body>
<h3> Normal Layout </h3>
<p>
Elements are placed in the order in which they
appear in the HTML
document, and their positions are determined
by their default positioning
properties.
</p>
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ol>
</body>
</html>

PW SKILLS
Example - Output
Output

PW SKILLS
Display Property
Altering Default Layout

There are two kinds of display types,


● Outer : inline, block, inline-block, none
● Inner : flow, flex, grid, etc.h

In this lesson, we will study about Inline and Block.

PW SKILLS
Example HTML to understand display
HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" <>
<meta name="viewport" content="width=device-width" <>
<title>Inline-Block Elements</title>
</head>
<body>
<div>
<div class="item1 item">Item 1</div>
<div class="item2 item">Item 2</div>
<div class="item3 item">Item 3</div>
</div>
</body>
</html>

PW SKILLS
display:block
Creates a block level element, generating line breaks before and after the element in Normal Flow.

CSS Output

.item {
display: block;
background-color: brown;
color: white;
border: 5px solid yellow;
padding: 10px;
}
In above example, all items are block elements thats
why, each item is onto a new line and each element
takes the whole width available.

PW SKILLS
display:inline
Creates an inline level element that does not generate line breaks, and starts on the same line in Normal Flow.

CSS Output
.item {
display: inline;
background-color: brown;
color: white;
border: 5px solid yellow;
padding: 10px; In the above example, we are making div elements
} explicitly inline that's why all elements are aligned on
the same line taking only required space.

PW SKILLS
display: inline-block
Creates an element which behave like an inline element while retaining some features of a block-level element.

CSS Output
.item {
display: inline-block;
background-color: brown;
color: white;
border: 5px solid yellow;
padding: 10px;
}

.item2 {
height: 100px;
} In this example, we have changed item2 height. If it was
a pure inline element, then we will not be able to set the
height of the element. Since the element is
inline-block, that's why we are able to use block level
element properties.

PW SKILLS
display: none
The display inline-block property in CSS is used to make an element invisible, and the
element will not take any space in the document.

CSS Output
.item {
display: none;
background-color: brown;
color: white;
border: 5px solid yellow;
padding: 10px;
}

PW SKILLS
THANK YOU

PW SKILLS

You might also like