Check out this snippet of HTML code:
<section class="container">
<div class="search"></div>
</section>
Here are the corresponding CSS rules:
*, *:before, *:after {
box-sizing: border-box;
}
body, section, div {
margin: 0;
padding: 0;
}
html, body { height: 100%; }
.container {
display: inline-block;
position: relative;
}
.search {
display: inline-block;
padding: 3em;
border: 1px solid black;
}
Upon inspecting the section element, you may notice that it has a size of 5px... even though I did not specify a size. I rely on the browser to calculate this based on the child's size.
Why does this happen?