- 首页
- 前端开发
- 带有“display: inline-flex"的元素有一个奇怪的上边距
带有“display: inline-flex"的元素有一个奇怪的上边距
[英] Element with "display: inline-flex" has a strange top margin
本文介绍了带有“display: inline-flex"的元素有一个奇怪的上边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个 div 元素，都带有 CSS 属性 display: inline-flex，因为我想将它们并排放置.起初，div 的位置似乎正确.
.userImg{高度:3em；宽度:3em；背景:红色；显示:inline-flex；}.nameOfUser{显示:inline-flex；高度:3em；宽度:10em；背景:蓝色；}
<div class = "nameOfUser"></div>
然而，一旦我在 nameOfUser div 内放置一些文本，它似乎会创建一些奇怪的顶部边距，这使得两个 div 元素彼此未对齐.
.userImg{高度:3em；宽度:3em；背景:红色；显示:inline-flex；}.nameOfUser{显示:inline-flex；高度:3em；宽度:10em；背景:蓝色；}
<div class = "nameOfUser"><h3>Jaxon Crosmas</h3>
有人可以解释为什么会发生这种情况以及可能的解决方案吗?
解决方案
使用 display: inline-flex 您正在处理内联级元素.
这会激活 vertical-align 属性，该属性仅适用于行内级和表格单元格元素 (
这是您当前的代码结构，以及您添加的文本:
.userImg {显示:inline-flex；高度:3em；宽度:3em；背景:红色；}.nameOfUser {显示:inline-flex；高度:3em；宽度:10em；背景:水色；}
<div class="userImg"></div><div class="nameOfUser"><h3>Jaxon Crosmas</h3>
第二个元素向下移动，使其与第一个元素的当前基线对齐.
现在向第一个元素添加一些文本:
.userImg {显示:inline-flex；高度:3em；宽度:3em；背景:红色；}.nameOfUser {显示:inline-flex；高度:3em；宽度:10em；背景:水色；}
<div class = "userImg">text</div><div class = "nameOfUser"><h3>Jaxon Crosmas</h3>
注意基线如何移动以对齐.
元素仍未完全对齐，因为 h3 具有默认的垂直边距.如果删除边距:
.userImg {显示:inline-flex；高度:3em；宽度:3em；背景:红色；}.nameOfUser {显示:inline-flex；高度:3em；宽度:10em；背景:水色；}h3 { 边距:0;}
<div class = "userImg">text</div><div class = "nameOfUser"><h3>Jaxon Crosmas</h3>
<小时>
这里有两个快速解决方案:
1.用任何其他值覆盖 vertical-align 的默认值.
.userImg {显示:inline-flex；高度:3em；宽度:3em；背景:红色；}.nameOfUser {显示:inline-flex；高度:3em；宽度:10em；背景:水色；}div { 垂直对齐:顶部；}
<div class = "nameOfUser"><h3>Jaxon Crosmas</h3>
2.使父级成为弹性容器.
这使您的元素具有弹性项目，从而取消激活 vertical-align 自 弹性项目是块级元素.
这个方法也将你的元素排成一行，因为弹性容器的初始设置是flex-direction: row.
.userImg {高度:3em；宽度:3em；背景:红色；}.nameOfUser {高度:3em；宽度:10em；背景:水色；}身体{显示:弹性；}
<div class = "nameOfUser"><h3>Jaxon Crosmas</h3>
I have two div elements, both with the CSS property display: inline-flex, as I would like to position them beside each other. At first, the div's appear to be positioned properly.
.userImg{
height: 3em;
width: 3em;
background: red;
display: inline-flex;
}
.nameOfUser{
display: inline-flex;
height: 3em;
width: 10em;
background: blue;
}
<div class = "userImg"></div>
<div class = "nameOfUser"></div>
However, once I place some text inside of the nameOfUser div, it seems to create some strange top margin which makes the two div elements un-aligned from each other.
.userImg{
height: 3em;
width: 3em;
background: red;
display: inline-flex;
}
.nameOfUser{
display: inline-flex;
height: 3em;
width: 10em;
background: blue;
}
<div class = "userImg"></div>
<div class = "nameOfUser">
<h3>Jaxon Crosmas</h3>
</div>
Can someone please explain why this is happening and a possible solution?
解决方案
With display: inline-flex you are dealing with inline-level elements.
This activates the vertical-align property, which applies only to inline-level and table-cell elements (source).
The initial value of vertical-align is baseline. This means that inline-level elements position themselves vertically to achieve baseline (text) alignment.
baseline
The baseline is the line upon which most letters sit and below which descenders extend.
Source: Wikipedia.org
This is your current code structure, with the text you added:
.userImg {
display: inline-flex;
height: 3em;
width: 3em;
background: red;
}
.nameOfUser {
display: inline-flex;
height: 3em;
width: 10em;
background: aqua;
}
<div class="userImg"></div>
<div class="nameOfUser">
<h3>Jaxon Crosmas</h3>
</div>
The second element shifts down so that it aligns with the current baseline of the first element.
Now add some text to the first element:
.userImg {
display: inline-flex;
height: 3em;
width: 3em;
background: red;
}
.nameOfUser {
display: inline-flex;
height: 3em;
width: 10em;
background: aqua;
}
<div class = "userImg">text</div>
<div class = "nameOfUser">
<h3>Jaxon Crosmas</h3>
</div>
Notice how the baselines shift to align.
The elements still aren't squarely aligned because the h3 has default vertical margins. If you remove the margins:
.userImg {
display: inline-flex;
height: 3em;
width: 3em;
background: red;
}
.nameOfUser {
display: inline-flex;
height: 3em;
width: 10em;
background: aqua;
}
h3 { margin: 0; }
<div class = "userImg">text</div>
<div class = "nameOfUser">
<h3>Jaxon Crosmas</h3>
</div>
Here are two quick solutions:
1. Override the default value of vertical-align, with any other value.
.userImg {
display: inline-flex;
height: 3em;
width: 3em;
background: red;
}
.nameOfUser {
display: inline-flex;
height: 3em;
width: 10em;
background: aqua;
}
div { vertical-align: top; }
<div class = "userImg"></div>
<div class = "nameOfUser">
<h3>Jaxon Crosmas</h3>
</div>
2. Make the parent a flex container.
This makes your elements flex items, which de-activates vertical-align since flex items are block-level elements.
This method also lines up your elements in a row, because an initial setting of a flex container is flex-direction: row.
.userImg {
height: 3em;
width: 3em;
background: red;
}
.nameOfUser {
height: 3em;
width: 10em;
background: aqua;
}
body { display: flex; }
<div class = "userImg"></div>
<div class = "nameOfUser">
<h3>Jaxon Crosmas</h3>
</div>
这篇关于带有“display: inline-flex"的元素有一个奇怪的上边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
