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;
}
3 Replies
it's because you're setting the div to
display: inline;
the one on the top is the left border, the one on the bottom is the right border (with the corners of the top and bottom borders in both). the h1 is a block element, which is splitting up the inline element
what are you trying to achieve?Thank you ! I’m trying to simply get a border around the h1. My questions are: why is the border only visible on the left side of the screen & why does the block element cause the inline border to split?
yes, as @Jochem indicated, you would need to display it as anything else than inline, try block.