[CSS3] CSS Display Property: Block, Inline-Block, and Inline
6415 ワード
Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest.
Takeway: Inline: Can NOT add height and width. But can add margin and padding Inline-block: Can add height, width, margin and padding. Not take the whole row. Block: Can add height, width, margin and padding, take the whole row.
Takeway:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>Here is some text in a paragraph tag, a paragraph tag has a dispay property of block by defualt. <span class="inline">A span is inline by defualt</span> but with some styling we can make it <span class="inline-block">inline-block</span>. Inline block will respect top and bottom margins and padding. We can also make it <span class="block">block</span> by adding classes and styling them.</p>
</body>
</html>.box {
border: 1px solid black;
margin: 5px;
display: block;
}
p {
border: 1px solid black;
}
.inline {
border: 1px solid blue;
display: inline;
margin-left: 10px;
margin-right: 50px;
padding-left: 10px;
padding-right: 50px;
margin-top: 50px;
width: 500px; // Doesn't work
height: 200px; // Doesn't work
}
.inline-block {
border: 1px solid red;
display: inline-block;
margin-right: 20px;
width: 200px;
height: 50px;
}
.block {
display: block;
border: 1px solid green;
width: 50px;
height: 100px;
}