blob: 126effe6515b777f2d97955ec3aebc72bd8fe343 [file] [log] [blame]
<!DOCTYPE html>
<!--
| The baseline of an "inline-block" is the baseline of its last line box
| in the normal flow, unless it has no in-flow line boxes.
| https://www.w3.org/TR/CSS21/visudet.html#line-height
-->
<html>
<head>
<style>
body {
color: #3f51b5;
font-family: Roboto;
font-size: 50px;
font-weight: bold;
}
.middle-inline-block {
color: #03a9f4;
display: inline-block;
margin-top: 50px;
}
.middle-block {
background-color: #03a9f4;
height: 50px;
}
.right-inline-block {
color: #fff;
display: inline-block;
}
.right-block {
background-color: #009688;
}
</style>
</head>
<body>
1st line
<div class="middle-inline-block">
1st line
<div class="middle-block"></div>
3rd line
<div class="middle-block"></div>
</div>
<div class="right-inline-block">
<div class="right-block">1st line</div>
</div>
</body>
</html>