Geek Answers Handbook

Span with display: inline-flex is taller than sibling

While playing with the flex container, I noticed that both Chrome and Firefox display it with a height of 1px more than static siblings.

Here is the code:

.container {
  background-color: yellow;
  border: 1px solid red;
}
.main {
  border: 1px solid black;
}
.flex-cont {
  display: inline-flex;
}
<div class="container">
  <span class="main flex-cont">
    		This is the flex container, height is 20px
    	</span>
  <span class="main">
    		This is not the flex container, height is 19px
    	</span>
</div>
Run code

Spell here: http://jsfiddle.net/pzoxfs90/

Does anyone know why this is and how to avoid it?

+4
source share
2 answers

The spandefault items are built-in items.

vertical-align, , baseline. descenders.

display: inline-flex , Flex. , , .

, vertical-align span1, span2, descender.

( , flex):

4. Flex

display : display , , - .

flex, inline flex .

.container {
    display: flex;
    background-color: yellow;
    border: 1px solid red;
}

.main {
    border: 1px solid black;
}
<div class="container">
    <span class="main">This is the flex container, height is 20px</span>
    <span class="main">This is not the flex container, height is 19px</span>
</div>

:

+1

, display:inline;, display:inline-block;, . , ...

body {
  margin: 30px;
}	

.container {
  background-color: yellow;
  border: 1px solid red;
}

.main {
  border: 1px solid black;
  display:inline-block;    
}

.flex-cont {
  display: inline-flex;
}
<div class="container">
	<span class="main flex-cont">
		This is the flex container, height is 20px
	</span>
	<span class="main">
		This is not the flex container, height is 20px
	</span>
</div>
0

More articles:


All Articles