为同龄元素提供与弹性框属性相同的"padding" 对齐内容：周围空间

Question

对不起谋杀标题。但我不确定如何总结我的问题。

我希望页脚中的文本与我的列表具有相同的填充（完全不在）中。这可能吗？

小提琴：https：//jsfiddle.net/dylnbr4a/

section {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
}
article {
  border: 1px solid darkgoldenrod;
}
aside {
  border: 1px solid wheat;
}
footer {
  border: 1px solid salmon;
}

<section>
  <article>
    <ul>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
    </ul>
  </article>
  <aside>
    <picture>
      <img src="https://d2btg9txypwkc4.cloudfront.net/media/catalog/category/Kampanjer_1.jpg" alt="image description" style="max-width: 460px">
    </picture>
  </aside>
</section>
<footer>
  this is a footer
</footer>

Answer 1

您可以在页脚上使用pseudoelement来模仿图像所占据的空间。（如果图像大小是动态的，则此方法实际上无法工作）

小提琴

section {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
}
article {
  border: 1px solid darkgoldenrod;
}
aside {
  border: 1px solid wheat;
}
footer {
  border: 1px solid salmon;
  display: flex;
  justify-content: space-around;
  /* default padding assigned to <ul> */
  padding-left: 40px;
}
footer:after {
  content: '';
  display: block;
  width: 330px;
  max-width: 460px;
}

<section>
  <article>
    <ul>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
      <li>
        bla
      </li>
    </ul>
  </article>
  <aside>
    <picture>
      <img src="https://d2btg9txypwkc4.cloudfront.net/media/catalog/category/Kampanjer_1.jpg" alt="image description" style="max-width: 460px">
    </picture>
  </aside>
</section>
<footer>
  this is a footer
</footer>