How to align the baseline and border of two divs

user_3805458 0
Viewed 191

I am stuck on this seemingly simple CSS problem. There are two divs, both have the same height and same font size, but different fonts. My goal is simply to verticall align the baseline and the borders of both divs.

Here is the first attempt:

.container {
  display: flex;
  align-items: center;
}


.d1, .d2 {
  
  height: 1.4em;
  line-height: 1.4em;
  border: 1px solid blue;
  font-size: 14px;
}


.d1 {
  font-family: Roboto, sans-serif;
}


.d2 {
  font-family: Roboto Mono, sans-serif;
}
<div class="container">
  <div class="d1">0</div>
  <div class="d2">0</div>
</div>

If we take a close look, the baseline is off by one pixel:

enter image description here

Now the same snippet with align-items: baseline;

.container {
  display: flex;
  align-items: baseline;
}


.d1, .d2 {
  
  height: 1.4em;
  line-height: 1.4em;
  border: 1px solid blue;
  font-size: 14px;
}


.d1 {
  font-family: Roboto, sans-serif;
}


.d2 {
  font-family: Roboto Mono, sans-serif;
}
<div class="container">
  <div class="d1">0</div>
  <div class="d2">0</div>
</div>

Now the basline is aligned, but the borders do not match anymore:

enter image description here

Is there a simple way to align the text of both divs while keeping the borders aligned?

flexbox css
3 Answers

All you can do is to manually adjust the position of one of them. You won't find a generic solution that work for all the cases:

@import url('https://fonts.googleapis.com/css2?family=Potta+One&family=Roboto:ital,wght@1,500&display=swap');
.container {
  display: flex;
  align-items: center;
  background:linear-gradient(red 0 0) 0 75%/100% 1px no-repeat;
}

.d1,
.d2 {
  height: 1.4em;
  line-height: 1.4em;
  border: 1px solid blue;
  font-size: 80px;
}

.d1 {
  font-family: 'Potta One', cursive;
}

.d2 {
  font-family: 'Roboto', sans-serif;
}

.d1 span {
  vertical-align: 0.08em; /* your custom value based on your fonts*/
  line-height: 0;
}
<div class="container">
  <div class="d1"><span>0</span></div>
  <div class="d2">0</div>
</div>

user_86203330

Here is my own solution that does what I want it to do.

The important part for me is the border between the two div elements. This is now represented by a third element, which uses self-align: stretch so it has the full container height. The other two div elements are aligned by the container's align-items: baseline attribute to make sure they have the same baseline. Also, different to the original snipped the outer border is applied to the container.

.container {
  display: inline-flex;
  align-items: baseline;
  font-size: 14px;
  border: 1px solid blue;    
}


.d1, .d2 { 
  vertical-align: bottom;
  right: 20px;
}


.d1 {
  font-family: Roboto, sans-serif;
}


.d2 {
  font-family: Roboto Mono, sans-serif;
}

.separator {
  align-self: stretch;
  width: 0;
  height: auto;
  border-right: inherit;
}
<div class="container">
  <div class="d1">0</div>
  <div class="separator">&nbsp;</div>
  <div class="d2">0</div>
</div>

user_38054580

try this border-right : none; for 0ne div element and border-left:none; for another div element

user_130350550
Related