Scribd
Upload
8 views3 pages

Inline Block Level Element

The document contains two HTML examples demonstrating the differences between block, inline, and inline-block elements using CSS styles. The first example illustrates these concepts with specific div elements, while the second example shows how to change the display properties of elements from block to inline and vice versa. Overall, it serves as a tutorial on the use of display properties in web design.

Uploaded by

Candy Man
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
8 views3 pages

Inline Block Level Element

The document contains two HTML examples demonstrating the differences between block, inline, and inline-block elements using CSS styles. The first example illustrates these concepts with specific div elements, while the second example shows how to change the display properties of elements from block to inline and vice versa. Overall, it serves as a tutorial on the use of display properties in web design.

Uploaded by

Candy Man
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/ 3

<!

-- Inline Block level Element -->


<!DOCTYPE html>
<html>
<head>
<style>
.ble
{
border: 4px solid green;
width: 200px;
height:100px;
background-color: aqua;
font-size: 20px;
display: block;

}
.ie
{
border: 4px solid green;
width: 200px;
height:100px;
background-color: aqua;
font-size: 20px;
display: inline;

}
.ib
{
border: 4px solid green;
width: 200px;
height:100px;
background-color: aqua;
font-size: 20px;
display: inline-block;

}
</style>
</head>
<body>
<h1>Block Level Element </h1>
<div class="ble">
block Level
</div>
<h1> Inline Element</h1>

<div class="ie">
INLINE Element
</div>
<h1> Inline Block level Element</h1>
<div class="ib">
INLINE BLOCK Element
</div>
</body>
</html>

<!-- BLOCK AND INLINE Element -->


<!DOCTYPE html>
<html>
<head>
<title>BLOCK AND INLINE Element</title>
<style>
div p{
display: inline;
}
.ex1
{
display: block;
}
</style>
</head>
<body>
<h1> Block Level Element</h1>
<p>Paragraph</p>
<p>heading</p>
<h1>Inline Element</h1>
<i>Italic</i>
<span> Span</span>
<h1> I Want Change block Element to inline Element</h1>
<div class="bti">

<p>paragraph</p>
<p>heading</p>
</div>
<h1> I Want Change inline Element to block Element</h1>
<div class="itb">
<i class="ex1">Italic</i>
<span class="ex 1">span </span>
</div>
</body>
</html>

You might also like