Vertical Formating CSS

by mzcarlos

HTML

<html>
<head>

</head>
<body>
<p style="height: 10em">
Hola
</p>
<p style="height: 1px; overflow: hidden;">
Hola
</p>
<p style="height: 3em; overflow: scroll;">
1 line<br>
2 line<br>
3 line<br>
4 line<br>
5 line<br>
6 line<br>
</p>

<div class='parent'>
<div class='child'>
Inner
</div>
</div>

<div style='height: 6em; background: purple; border: 1px solid gray;'>
<p style='height: 50%; margin: 1em auto;'>
Half as tall
</p>

</div>
</body>

</html>

CSS

p {
  background: gray;
 
}

.parent {
  height: 300px;
  background: pink;
  border: 1px solid gray;
}
.child {
  height: 100px;
  background: blue;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 0;
  margin-right: 0;
}