CSS Display inline-block

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

CSS display is used to control the layout of the element. It specifies how the element is displayed.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

Every element on the webpage is a rectangular box and the CSS property defines the behavior of that rectangular box.

The display property can take the following values −

display: inline :- The inline element takes the required width only. It doesn't force the line break so the flow of text doesn't break in inline

display: inline-block :- The CSS display inline-block element is very similar to inline element but the difference is it allows to set a width and height on the element..

display: block :- The CSS display block element takes as much as horizontal space as they can. Means the block element takes the full available width.

Example : CSS - Display inline-block

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline;
width: 50px;
height: 50px;
padding: 5px;
border: 1px solid red;
background-color: blue;
color:white;
}
span.b {
display: inline-block;
width: 50px;
height: 50px;
padding: 5px;
border: 1px solid red;
background-color: blue;
color:white;
}
span.c {
display: block;
width: 50px;
height: 50px;
padding: 5px;
border: 1px solid red;
background-color: blue;
color:white;
}
</style>
</head>
<body>
<h3>The display Property</h3>

<p><b>CSS - display: inline</b></p>
<div> CSS describes how <span class="a">HTML
</span> <span class="a">Elements</span>are to be displayed on screen </div>
<p><b>CSS - display: inline-block</b></p>
<div> CSS describes how <span class="b">HTML</span>
<span class="b">Elements</span>are to be displayed on screen </div>
<p><b>CSS- display: block</b></p>
<div>CSS describes how <span class="c">HTML</span>
<span class="c">Elements</span> are to be displayed on screen </div>
</body>
</html>

When the above code is compiled , it produces the following result.

Result

CSS -Display inline-block to Create Links

CSS display is used to control the layout of the element. You can specifies how the HTML links is displayed.

CSS display: inline-block used to display list items horizontally.

You can learn more how to create HTML links.HTML Link Tutorial

When the above code is compiled , it produces the following result.

Result

« Previous Next »

C++ Tutorial	CSS Tutorial	C# Tutorial	PHP Tutorial
Java Tutorial	SQL Tutorial	JQuery Tutorial	MySQL Tutorial
HTML - Tutorial	Node.Js Tutorial	JavaScript Tutorial	Python Tutorial
MySQL Installation	Node.js Installation	XAMPP -- Installation	Python Installation
C++ - Environment Setup	Java - Environment Setup	C# - Environment Setup	Responsive Web Design

CSS - Display inline-block

Example : CSS - Display inline-block

Result

CSS -Display inline-block to Create Links

Example : Create Links

Result