Scribd
Upload
2 views

Html Block and Inline element

The document explains the differences between block-level and inline elements in HTML, highlighting that block elements start on a new line and take full width, while inline elements do not. It details the usage of the <div> element as a container for other elements, methods for aligning <div> elements side by side using CSS, and introduces the Flexbox Layout Module for responsive design. Examples of code for centering and aligning <div> elements are provided to illustrate these concepts.

Uploaded by

Anees Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Html Block and Inline element

The document explains the differences between block-level and inline elements in HTML, highlighting that block elements start on a new line and take full width, while inline elements do not. It details the usage of the <div> element as a container for other elements, methods for aligning <div> elements side by side using CSS, and introduces the Flexbox Layout Module for responsive design. Examples of code for centering and aligning <div> elements are provided to illustrate these concepts.

Uploaded by

Anees Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

BLOCK AND INLINE IN

HTML
BLOCK AND INLINE ELEMENT IN HTML
❑ A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.
❑ A block-level element always takes up the full width available (stretches out
to the left and right as far as it can).
❑ Two commonly used block elements are: <p> and <div>.
❑ The <p> element defines a paragraph in an HTML document.
❑ The <div> element defines a division or a section in an HTML document.

Inline Elements
❑ An inline element does not start on a new line.
❑ An inline element only takes up as much width as necessary.
❑ This is a <span> element inside a paragraph.
THE <DIV> ELEMENT
❑ The <div> element is by default a block element, meaning that it takes all
available width, and comes with line breaks before and after
❑ The <div> element is used as a container for other HTML elements.
❑ A <div> element takes up all available width

<div> as a container
❑ The <div> element is often used to group sections of a web page together.

Center align a <div> element


❑ If you have a <div> element that is not 100% wide, and you want to center-
align it, set the CSS margin property to auto.
<style>
div {
width:300px;
margin:auto;
}
</style>
Multiple <div> elements
❑ You can have many <div> containers on the same page.

Example
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>

<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
Aligning <div> elements side by side
❑ When building web pages, you often want to have two or more <div> elements
side by side, like this

There are different methods for aligning elements side by side, all include some CSS styling.
Float
❑ The CSS float property was not originally meant to align <div> elements side-by-
side, but has been used for this purpose for many years.
❑ The CSS float property is used for positioning and formatting content and allow
elements float next to each other instead of on top of each other.

<style> .mycontainer div {


.mycontainer { width:33%;
width:100%; float:left;
overflow:auto; }
} </style>
CSS HTML
<style> <body>
div.mycontainer {
<div class="mycontainer">
width:100%;
overflow:auto;
<div style="background-color:#FFF4A3;">
}
<h2>My Div Elements</h2>
div.mycontainer div {
<p>My First Paragraph</p>
width:33%;
<p>My 2nd Paragraph</p>
float:left;
</div>
}
<div style="background-color:#FFC0C7;">
</style>
<h2>My 2nd Div Elements</h2>
<p>My First Paragraph</p>
<p>My 2nd Paragraph</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>My 3rd Div Elements</h2>
<p>My First Paragraph</p>
<p>My 2nd Paragraph</p>
</div>
</div>
</body>
Inline-block
❑ If you change the <div> element's display property from block to inline-block,
the <div> elements will no longer add a line break before and after, and will be
displayed side by side instead of on top of each other.
❑ to use display: inline-block to align div elements side by side

<style>
div {
width: 30%;
display: inline-block;
}
Flex </style>
❑ The CSS Flexbox Layout Module was introduced to make it easier to design flexible
responsive layout structure without using float or positioning.
❑ To make the CSS flex method work, surround the <div> elements with
another <div> element and give it the status as a flex container.

<style> .mycontainer div {


.mycontainer { width:33%;
display: flex; }
} </style>

You might also like