Has a margin after set overflow:hidden of a div?

Question

.d1 {
  height: 10px;
}

.dd {
  display: inline-block;
  overflow: hidden;
}

.dd1 {
  display: inline-block;
}

<div class="d1">
  <div class="dd"></div>
  <div class="dd1"></div>
</div>

unset the overflow the dd and dd1 is in same line. but if set the two divs not has an equal height.

Sorry, but I don't understand what you are up to. Try to be a little more precise. And one thing I noticed: you don't have the class `dd1` set in your html, but you defined properties for that class in your css — Bastian Springer, Feb 24 '20 at 09:06

score 0 · Answer 1 · answered Feb 24 '20 at 09:37

If you take a look at the spec, you may read:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

So what we know as the "baseline" is actually different for inline elements that have an overflow that is something other than visible.

To have them to visually appear inline, I believe you'll need to explicitely style the vertical-align property:

.d1{
    height:10px;
}
.dd{
    display:inline-block;
    vertical-align: bottom;
    overflow:hidden;
}
.dd1{
    display:inline-block;
    vertical-align: bottom;
}

score 0 · Answer 2 · answered Feb 24 '20 at 10:27

0

Try this

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

.dd {
  overflow: hidden;
}

answered Feb 24 '20 at 10:27

Makson Bondaruk

36
5

Has a margin after set overflow:hidden of a div?

2 Answers2