Understand display : inline versus block

Block elements start on a new line and take up as much width as they can by default. Inline elements stay in the current line and only take up as much width as necessary.

This is the main difference between span and div tags. By default the display property for div is “block” and for span it is “inline”.

Here’s the code to show the experiment:

<html>
<head>
   <link rel="stylesheet" href="BLOCK.css">
</head>
<body>
   <div class=''>Default<div>Div A</div><div>Div B</div></div>
   <div class='BLOCKinline'>Inline<div>Div A</div><div>Div B</div></div>
   <div class='BLOCKblock'>Block<div>Div A</div><div>Div B</div></div>
   <div class=''>Default<span>Span A</span><span>Span B</span></div>
   <div class='BLOCKinline'>Inline<span>Span A</span><span>Span B</span></div>
   <div class='BLOCKblock'>Block<span>Span A</span><span>Span B</span></div>
</body>
</html>

with this for BLOCK.css

.BLOCKinline *{
   display: inline;
}

.BLOCKblock * {
   display: block;
}

div * {
   outline: red solid 1px; /* Display red outlines for visualization */
}

This is what the result is:

Here you can see that div’s and spans are equivalent - the only difference is that by default the display property for div is “block” and for span it is “inline”.

The display property can also be set to inline-block - which is similar to inline except that one can specify the width and height of the block.

I suggest seeing this video for more flavour.

Concepts

Understand display : inline versus block

Related pages