主页 / 问题 / 871978
Accepted
Вячеслав
Asked:2020-08-22 19:53:44 +0000 UTC2020-08-22 19:53:44 +0000 UTC

在 flexbox 容器中没有明确的填充

  • 772

在codepen 中，在图像下方创建了一个4px的填充。您可以通过添加图片display: block;或父图片来决定margin: -4px;

.reason-one {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 256px;
  color: #fff;
  text-align: center;
}

.reason-one div:first-child {
  background-color: #81b3d2;
  -ms-flex-preferred-size: 400px;
  flex-basis: 400px;
}

.reason-one h2 {
  margin: 54px 100px 0;
  line-height: 21px;
}

.reason-one span {
  display: inline-block;
  margin-top: 24px;
}

.reason-one p {
  margin: 21px 45px 0;
}

.reason-one div:last-child img {
  /*   display: block; */
}
<section class="reason-one">
  <div>
    <h2>настоящий городок</h2>
    <span>— №1 —</span>
    <p>седона — не аттракцион для туристов, там течёт своя жизнь</p>
  </div>
  <div>
    <img src="//i.stack.imgur.com/lGg3u.jpg" style="height: 256px">
  </div>
</section>

帮助我了解缩进的来源以及如何捕捉它，tk。在网络检查器中不清楚

flexbox

1 个回答

  1. Best Answer

    因为图片是文字，所以与文字的基线对齐，与行底有间隙。为避免这种情况，您需要更改vertical-align或display。

    div {
  float: left;
  margin: 8px;
  border: 1px solid blue;
}
    <div>
  <img src=//www.gravatar.com/avatar/c6af686c7b79395bbb7fb1d10adaeded?s=64&d=identicon&r=PG>
</div>
<div>
  <img style=vertical-align:middle src=//www.gravatar.com/avatar/c6af686c7b79395bbb7fb1d10adaeded?s=64&d=identicon&r=PG>
</div>
<div>
  <img style=display:block src=//www.gravatar.com/avatar/c6af686c7b79395bbb7fb1d10adaeded?s=64&d=identicon&r=PG>
</div>

    • 5

相关问题