KP-C

Kevin Powell - Community•2y ago•

5 replies

Power Coder

split border on inline element

Hi! Does anyone have an idea why the border appears split on the h1 element in this code?

<div class="one">
</div>

<div class="two">
<h1>This is an H1 tag.</h1>
</div>

<div class="three">
</div>


* {
box-sizing: border-box;
}
.one {
height: 200px;
width: 200px;
margin-bottom: 100px;
background-color: blue;
}

.two {
border: 10px solid pink;
display: inline;
height: 200px;
width: 200px;
background-color: aqua;
margin-top: 100px;
margin-bottom: 100px;
}

.three {
height: 200px;
width: 200px;
background-color: steelblue;
}