HTML | Block and Inline Elements
Every element in HTML has a default display value which depends upon the element type. Block or inline are the default display value for the most of the elements.
Block Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can.
- div element: The div element is used as a container for other HTML elements. It has no required attributes. Style, class and id are the commonly used attributes.
Syntax:
<div>GFG</div>
Example-1:
<!DOCTYPE html>
<
html
>
<
body
>
<
style
>
body {
text-align: center;
}
h1 {
color: green;
}
</
style
>
<!-- Div element. -->
<
div
style="background-color:black;
color:white;
padding:20px;">
<
h1
>GeeksforGeeks</
h1
>
<
h3
>GeeksforGeeks is a science
portal for geeks.</
h3
>
<
h3
>You can give reviews as well as
contribute posts on this portal.</
h3
>
</
div
>
</
body
>
</
html
>
Output:
Inline Elements: An inline element is the opposite of the block-level element. It does not start on a new line and takes up only necessary width.
- span element: The span element is used as a container for text. It has no required attributes. Style, class and id are the commonly used attributes.
Syntax:
<span>GFG</span>
Example-2:
<!DOCTYPE html>
<
html
>
<
style
>
body {
text-align: center;
}
h1 {
color: green;
}
</
style
>
<
body
>
<!-- Sapn element. -->
<
h1
>Geeks<
span
style
=
"color:red"
>
for</
span
>Geeks</
h1
>
</
body
>
</
html
>
Output 2:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera