Difference between inline and inline block in CSS

HTML & CSS
1

I am new to web designing. can any one explain me the difference between “display: inline” and “display:inline-block” in CSS. Please give me a example if possible.

2

Hi,

display:inline makes the element create inline-boxes which basically means that dimensions don’t apply and vertical margins no longer work. Vertical padding can be added but cannot increase the height of the element greater than it’s line height and so may overlap subsequent lines.

Inline elements (or elements with a display of inline) can be wrapped around text (or other inline content) and used for styling but won’t affect the position of the text as such.

It’s easier seen in a short demo.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.inline, .inline-block {
	width:100px;
	height:100px;
	border:1px solid #000;
	background:red;
	display:inline-block;
}
.inline { display:inline }
</style>
</head>

<body>
<h1>Inline elements</h1>
<div class="inline"> I am an element with a display of inline </div>
<div class="inline"> I am an element with a display of inline</div>
<div class="inline"> I am an element with a display of inline</div>
<div class="inline"> I am an element with a display of inline</div>
<h2>Inline-block elements</h2>
<div class="inline-block"> I am an element with a display of inline-block</div>
<div class="inline-block"> I am an element with a display of inline-block</div>
<div class="inline-block"> I am an element with a display of inline-block</div>
<div class="inline-block"> I am an element with a display of inline-block</div>
</body>
</html>

inline-blocks on the other hand can have dimensions like block boxes but will shrink to fit the content rather than stretching full width as block boxes do. It allows for a series of block elements to behave as though they were on the same line (much like floating).

The easiest way to work out what they do is just to play around with the demo above and see what happens.

3

[font=calibri]If you have display:inline;, the content of that element just becomes part of the paragraph, usually with other formatting applied to it, but essentially you have a continuous run of text in one side and out the other.

If you have display:inline-block;, you get a block that sits in the middle of a paragraph. Within that block, you can set a specific height, you can have text wrapping onto several lines. The best analogy I can think of is in MS Word, where you have a picture that is set to “in line with text”. It can be particularly useful when lining up several blocks side-by-side, where you don’t want to use float on actual blocks.[/font]