：在尊重父母的填充物之前

Question

我正在尝试使用a的{​​{1}}元素上的css插入徽标图像。

但是，我无法看到background-image框来尊重a:before的填充。

下面的代码段中的第一个示例使用的是a，width和height，但什么都没显示。

因此，我在第二个示例中尝试使用display: block。显示徽标，但不遵守position: absolute的填充。

如何使徽标适合a的边框内？

当前

预期

我要避免做的事情

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

• 使用固定值以适合a的填充内的.logo:before。
• 修改a样式

a

*, ::before, ::after {
  box-sizing: border-box;
}
body { margin: 0; }

.container, .container > p, .container > .logo {
  display: flex;
}

.container {
  align-items: center;
  justify-content: space-between;
  margin-left: 2rem;
  margin-right: 2rem;
}

.container > p, .container > .logo {
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;
}

.logo {
  position: relative;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  color: transparent !important;
}

.logo:before {
  content: '';
  background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  display: block;
}

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

Answer 1

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

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

Answer 2

我删除了logo的填充，并将min-height: 28px;添加到您的背景图片中。期待进一步的提问。

*, ::before, ::after {
  box-sizing: border-box;
}
body { margin: 0; }

.container, .container > p, .container > .logo {
  display: flex;
}

.container {
  align-items: center;
  justify-content: space-between;
  margin-left: 2rem;
  margin-right: 2rem;
}

.container > p, .container > .logo {
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;
}

.logo {
  position: relative;
  /*padding-top: .3125rem;
  padding-bottom: .3125rem;*/
  color: transparent !important;
}

.logo:before {
  content: '';
  background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  display: block;
  min-height: 28px;
}

<div class="container">
    <a class="logo">Logo</a>
    <p>Navigation links</p>
</div>

<div class="container">
    <a class="logo absolute">Logo</a>
    <p>Navigation links</p>
</div>

Answer 3

由于.logo:before的{​​{1}}是一个空字符串，因此除非明确定义具有固定值的content，否则将不会显示任何内容。

height可以解决此问题，但这只是一个补丁，而不是根本性的修复。

根本原因是由于content: ' '中的align-items: center将内容中间的内容与所需的最小高度垂直对齐。空.container的组合会导致content元素根本不显示任何内容。

当前所需的行为是希望.logo:before的高度与导航链接的高度相匹配，此处无需使用.logo，align-items: center应该可以。

normal方法将始终忽略填充。

position: absolute

*, ::before, ::after {
  box-sizing: border-box;
}
body { margin: 0; }

.container, .container > p, .container > .logo {
  display: flex;
}

.container {
  align-items: normal;
  justify-content: space-between;
  margin-left: 2rem;
  margin-right: 2rem;
  background-color: gray;
}

.container > p, .container > .logo {
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;
}

.logo {
  position: relative;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  color: transparent !important;
}

.logo:before {
  content: '';
  background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

Answer 4

您可以将图像作为徽标的背景，并使用background-origin:content-box;，以便仅覆盖内容，而不覆盖填充：

*,
 ::before,
 ::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container,
.container>p,
.container>.logo {
  display: flex;
}

.container {
  align-items: center;
  justify-content: space-between;
  margin-left: 2rem;
  margin-right: 2rem;
}

.container>p,
.container>.logo {
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;
}

.logo {
  position: relative;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  color: transparent !important;
  background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
  background-size: contain;
  background-origin: content-box;
  background-color: pink;
}

<div class="container">
  <a class="logo">Logo</a>
  <p>Navigation links</p>
</div>