Html ：在尊重父母之前'；填充物

我正在尝试使用css在背景图像为

的
元素上插入徽标图像

但是，我无法使
a:before
框尊重
a
的填充

下面代码段中的第一个示例使用了
width
、
height
和
display:block
，但没有显示任何内容

因此，我在第二个示例中尝试了
位置：绝对
。显示徽标，但它不尊重
a
的填充

如何使徽标适合
a
的填充

现在的

预期

我想避免做什么
由于响应性设计要求，我希望徽标的大小根据
a
的元素大小进行更改。因此，下面是一些我想避免的事情


使用固定值来适应
。徽标：在
内部
的填充之前

修改
a
样式


*，：：之前，：：之后{
框大小：边框框；
}
正文{页边距：0；}
.container、.container>p、.container>logo{
显示器：flex；
}
.集装箱{
对齐项目：居中；
证明内容：之间的空间；
左边距：2em；
右边距：2em；
}
.container>p、.container>logo{
弹性基础：自动；
柔性生长：1；
对齐项目：居中；
}
.标志{
位置：相对位置；
填料顶部：.3125rem；
填充底部：.3125rem；
颜色：透明！重要；
}
.标志：之前{
内容：''；
背景：url（'https://via.placeholder.com/150x100/FF0000/000000")不重复;；
背景尺寸：包含；
宽度：100%；
身高：100%；
显示：块；
}
.标志。绝对：之前{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
}

标志
导航链接

标志
导航链接

尝试将徽标的top和bottom属性的值更改为.3125rem

.logo.absolute:before {
  position: absolute;
  left: 0;
  right: 0;
  top: .3125rem;
  bottom: .3125rem;
}

尝试将徽标的top和bottom属性的值更改为.3125rem

.logo.absolute:before {
  position: absolute;
  left: 0;
  right: 0;
  top: .3125rem;
  bottom: .3125rem;
}

我移除了
徽标的填充物
并添加了
最小高度：28px到您的背景图像。期待进一步提问


*，：：之前，：：之后{
框大小：边框框；
}
正文{页边距：0；}
.container、.container>p、.container>logo{
显示器：flex；
}
.集装箱{
对齐项目：居中；
证明内容：之间的空间；
左边距：2em；
右边距：2em；
}
.container>p、.container>logo{
弹性基础：自动；
柔性生长：1；
对齐项目：居中；
}
.标志{
位置：相对位置；
/*填料顶部：.3125rem；
填充底部：.3125rem*/
颜色：透明！重要；
}
.标志：之前{
内容：''；
背景：url（'https://via.placeholder.com/150x100/FF0000/000000")不重复;；
背景尺寸：包含；
宽度：100%；
身高：100%；
显示：块；
最小高度：28px；
}

标志
导航链接

标志
导航链接

我移除了
徽标的填充，并添加了
最小高度：28px到您的背景图像。期待进一步提问


*，：：之前，：：之后{
框大小：边框框；
}
正文{页边距：0；}
.container、.container>p、.container>logo{
显示器：flex；
}
.集装箱{
对齐项目：居中；
证明内容：之间的空间；
左边距：2em；
右边距：2em；
}
.container>p、.container>logo{
弹性基础：自动；
柔性生长：1；
对齐项目：居中；
}
.标志{
位置：相对位置；
/*填料顶部：.3125rem；
填充底部：.3125rem*/
颜色：透明！重要；
}
.标志：之前{
内容：''；
背景：url（'https://via.placeholder.com/150x100/FF0000/000000")不重复;；
背景尺寸：包含；
宽度：100%；
身高：100%；
显示：块；
最小高度：28px；
}

标志
导航链接

标志
导航链接

由于
.logo:在
的
内容
为空字符串之前，除非用固定值明确定义了
高度
，否则将不会显示任何内容

content:“
可以解决问题，但这只是一个补丁，而不是根补丁

根本原因是由于<代码>对齐项：<代码>中的“中心< /代码>”。容器将垂直对齐中间的内容和所需的最小高度。与空
内容的组合
导致
.logo:before
元素完全不显示任何内容

当前所需的行为需要
。徽标的高度要与导航链接的高度相匹配，无需使用
对齐项目：居中
，正常的
应该可以

position:absolute
方法将始终忽略填充


*，：：之前，：：之后{
框大小：边框框；
}
正文{页边距：0；}
.container、.container>p、.container>logo{
显示器：flex；
}
.集装箱{
对齐项目：正常；
证明内容：之间的空间；
左边距：2em；
右边距：2em；
背景颜色：灰色；
}
.container>p、.container>logo{
弹性基础：自动；
柔性生长：1；
对齐项目：居中；
}
.标志{
位置：相对位置；
填料顶部：.3125rem；
填充底部：.3125rem；
颜色：透明！重要；
}
.标志：之前{
内容：''；
背景：url（'https://via.placeholder.com/150x100/FF0000/000000")不重复;；
背景尺寸：包含；
宽度：100%；
身高：100%；
}

标志
导航链接

由于
.logo:在
的
内容
为空字符串之前，除非用固定值明确定义了
高度
，否则将不会显示任何内容

content:“
可以解决问题，但这只是一个补丁，而不是根补丁

根本原因是由于<代码>对齐项：<代码>中的“中心< /代码>”。容器将垂直对齐中间的内容和所需的最小高度。梳子