时间戳

首页 > 解决方案 > 填充为顶部和底部提供不同的填充

html - 填充为顶部和底部提供不同的填充

问题描述

html {
  font-size : 10px;
  }
body {
  text-align : center;
  color       : #9da8c1;
  font-family : sans-serif;
  background  : #013f81;
  }
h1 {
  font-size: 4rem;
  }
#img-div {
  background : #2a5590;
  width      : 600px;
  margin     : 0 auto;
  padding    : 10px;
  }
#conway-photo {
  height : auto;
  width  : 500px;
  }
figcaption {
  font-size  : 1.5rem;
  background : red;
  }
<main id="main">
  <h1 id="title">John Horton Conway<h1>
  <figure id="img-div">
    <img id="conway-photo" src="https://static01.nyt.com/images/2020/04/18/obituaries/14Conway1/14Conway1-mediumSquareAt3X-v2.jpg"</img>
    <figcaption>J.H.Conway holding a model of polyhedron</figcaption>
  <figure>
</main>

我有这个 html 代码，我想在图中添加填充，以便文本和图像与边框的距离相同。
由于某种原因，我不知道，底部的距离比顶部的距离要大。当我从无填充切换到 10px 时，底部也有一个很大的跳跃。

标签： htmlcss

解决方案

您的 HTML 标签搞砸了，请务必使用 HTML Validator（如https://validator.w3.org/ ）检查您的代码。

我修复了您的 HTML，它似乎正在按照您的预期工作：

html {
font-size: 10px;
}

body {
text-align: center;
color: #9da8c1;
font-family: sans-serif;
background-color: #013f81;
}

h1 {
font-size: 4rem;
}

#img-div {
background-color: #2a5590;
width: 600px;
margin: 0 auto;
padding: 10px;
}

#conway-photo {
height: auto;
width: 500px;
}

figcaption {
font-size: 1.5rem;
background-color: red;
}
<html>
<main id="main">
<h1 id="title">John Horton Conway</h1>
<figure id="img-div">
<img id="conway-photo" src="https://static01.nyt.com/images/2020/04/18/obituaries/14Conway1/14Conway1-mediumSquareAt3X-v2.jpg">
<figcaption>J.H.Conway holding a model of polyhedron</figcaption>
</figure>
</main>
</html>

推荐阅读