0

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.

enter image description here

.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>
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82

4 Answers4

1

Change the display of your 'links' to inline-block

.bar{
 height:20px;
 background:#ff0000;
 margin:0;
 padding:0;
 box-sizing:border-box;
}

.changeTab{
  padding:10px;
  text-align:center;
  background:#000000;
  color:#ffffff;
  height:25px;
  display: inline-block;
  margin:0;
}
<div class="bar"><span></span></div>
<a class="changeTab">Home</a>
<a class="changeTab">About</a>
Alb
  • 1,063
  • 9
  • 33
1

Just change your links (a) to another display behaviour --> inline-block. And remove or optimize your heights on the links.

.changeTab{
  ....
  display: inline-block;
}

Codepen

Mikel Wohlschlegel
  • 1,364
  • 1
  • 11
  • 23
1

Its because <a> tag is a inline element and it respond differently for top and bottom padding it calculates from the center of the element and inline elements doesn't respond to top and bottom margin

http://maxdesign.com.au/articles/inline/

Inline elements

The W3C’s CSS2 spec defines inline elements as "elements of the source document that do not form new blocks of content; the content is distributed in lines". So, inline content is displayed with no line breaks before or afterwards.

.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;
  display: inline-block;
}
<div class="bar"><span></span></div>
<a class="changeTab">Home</a>
<a class="changeTab">About</a>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
0

Add margin-bottom inside the div. <div class="bar" style="margin-bottom: 6px;"></div>

Nimisha Rajesh
  • 1
  • 1