(Frontend_3) CSS inline & block

Introduction

We can categorize the objects in html into inline and block. The easiest way to distinguish the difference is that one block will fill all the horizontal area while inline would not.

The markups in block category

div、p、ul、li

The markups in inline category

span、a、input、img、em

Height

We can set up the height of blocks while we cannot do it to inlines. The height of inline markup only determined by the contents of the inline.

Horizontal

We cannot put blocks side by side horizontally while inlines can.

Display

In CSS, we can use property, display , to interchange the markups into block or inline

display:inline

for example, with blocks, h1 and p ,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<h1>block with h1</h1>
<p>block with p</p>
</body>
</html>

the layout:

Then we can add display:inline to markup h1and p and the layout:

display:block

for example, with inlines, span and a ,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>

</style>
<body>

<span>inline with span</span>
<a href="">inline with a</a>
</body>
</html>

the layout:

Then we can add display:block to either markup spanor a and the layout:

Notice! the reason why we only specify an inline markup with display:block is that either one turning into block will fill all the horizontal area.

display:inline-block

If we want an object to have height in an inline object, then we should use display:inline-block to achieve it; for example, with the setting below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>strong{
background-color: #eee;
height: 100px;
/*display: inline-block;*/
}

</style>
<body>

<span>inline with span <strong>aaaa</strong></span>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Beatae adipisci maiores vel dignissimos, totam esse blanditiis ut, eius officia a eveniet quae, alias in tempora, placeat! Dolor facilis, deleniti incidunt!</p>
</body>
</html>

The layout would be

as you can see, event thought we specified the height in the inline markup, strong , aaastill has no height, if we add the display:inline-block to it, then the layout would be

Reference