I have very simple div and anchors which I expect to act as block
and inline
element but they have unwanted overlap. I have tried setting box-sizing:border-box;
and also setting margin:0
on both elements but no chance.
How should I change the code so all elements stay in their own place?
Edit: I am testing the result in Chrome Version 72.0.3626.109 and there is overlap on top of anchor elements and bottom of red div.
.bar{
height:20px;
background:#ff0000;
margin:0;
padding:0;
box-sizing:border-box;
}
.changeTab{
padding:10px;
text-align:center;
background:#000000;
color:#ffffff;
line-height:25px;
height:25px;
box-sizing:border-box;
margin:0;
}
<div class="bar"><span></span></div>
<a class="changeTab">Home</a>
<a class="changeTab">About</a>