在 html 中填充文章元素答案

【问题标题】：padding article elements in html在 html 中填充文章元素
【发布时间】：2021-10-20 11:33:39
【问题描述】：

我正在使用文章标题来划分我希望展示的一些项目：

.project-elem {
  background-color: greenyellow;
  padding-top: 5rem;
  padding-bottom: 5rem;
  height: 300px;
}

.projects {
  margin: 0;
  padding: .7rem;
  background-color: #DDCDE8;
  font: Asap, sans-serif;
  height: 1000px;
}

.project-n {
  background-color: green;
  text-align: center;
  width: 60%;
  float: left;
  padding: 2.5rem;
}

.img {
  background-color: blue;
  text-align: center;
  padding: 3rem;
  margin-left: 40%;
}

<div class="projects" id=#projects>
  <h2>My Projects</h2>
  <article class="project-elem">
    <div class="project-n" id="dictocounter">
      <h3>Dictation Counter</h3>
      <p>info about proj</p>
      <img src="dictocounter1.jpg" alt="Dictocounter in Action">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
  <article class="project-elem">
    <div class="project-n" id="calc">
      <h3>RPN Calculator</h3>
      <p>info about proj</p>
      <img src="calc.jpg" alt="RPN Calculator Decoding Input">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
  <article class="project-elem">
    <div class="project-n" id="markov">
      <h3>Markov Chain Text Generation</h3>
      <p>info about proj</p>
      <img src="calc.jpg" alt="Markov Chain Text Generation">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
  <article class="project-elem">
    <div class="project-n" id="audio">
      <h3>Song Similarities</h3>
      <p>info about proj</p>
      <img src="calc.jpg" alt="Audio Spectral Analysis">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
  <article class="project-elem">
    <div class="project-n" id="tree">
      <h3>DFS/BFS Search Tree</h3>
      <p>info about proj</p>
      <img src="calc.jpg" alt="Simple Trees">
    </div>
    <div class="img">
      <p>heres SOME IMAGE</p>
    </div>
  </article>
</div>

然而，即使我明确地填充了project-elem，实际的project-elem 文章也没有被填充（而是全部一起被涂抹成一个灰绿色的斑点）：

我可以看出项目元素之间没有填充，因为在每个浅绿色项目元素之间看不到外部分隔（bkgrd 颜色为紫色）。为什么会出现这种情况，我该如何解决？

另外，我怎样才能使 img 类垂直 - 即使使用 project-n 类？

【问题讨论】：

padding 向内，margin 向外。

标签： html css padding

【解决方案1】：

我建议你为此使用 flex-box。应该是这样的：

html
<html>
<head>
<style>
.project-elem {
    background-color: greenyellow;
    padding-top: 5rem;
    padding-bottom: 5rem;
    height: 300px;
    display: flex;
    justify-content: space-between;
}

.projects {
    margin: 0;
    background-color: #DDCDE8;
    font: Asap, sans-serif;
    height: 1000px;
    box-sizing: border-box;
}

.project-n {
    background-color: green;
    text-align: center;
    width: 60%;
    padding: 2.5rem;
    box-sizing: border-box;
}

.img {
    background-color: blue;
    text-align: center;
    padding: 3rem;
    box-sizing: border-box;
    width: 25%;
}

</style>
</head>
<body>
<div class="projects" id=#projects>
        <h2>My Projects</h2>

        <article class="project-elem">
            <div class="project-n" id="dictocounter">
                <h3>Dictation Counter</h3>
                <p>info about proj</p>
                <img src="dictocounter1.jpg" alt="Dictocounter in Action">
            </div>
            <div class="img">
                <p>heres SOME IMAGE</p>
            </div>
        </article>

        <article class="project-elem">
            <div class="project-n" id="calc">
                <h3>RPN Calculator</h3>
                <p>info about proj</p>
                <img src="calc.jpg" alt="RPN Calculator Decoding Input">
            </div>
            <div class="img">
                <p>heres SOME IMAGE</p>
            </div>
        </article>
        
        <article class="project-elem">
            <div class="project-n" id="markov">
                <h3>Markov Chain Text Generation</h3>
                <p>info about proj</p>
                <img src="calc.jpg" alt="Markov Chain Text Generation">
            </div>
            <div class="img">
                <p>heres SOME IMAGE</p>
            </div>
        </article>

        <article class="project-elem">
            <div class="project-n" id="audio">
                <h3>Song Similarities</h3>
                <p>info about proj</p>
                <img src="calc.jpg" alt="Audio Spectral Analysis">
            </div>
            <div class="img">
                <p>heres SOME IMAGE</p>
            </div>
        </article>

        <article class="project-elem">
            <div class="project-n" id="tree">
                <h3>DFS/BFS Search Tree</h3>
                <p>info about proj</p>
                <img src="calc.jpg" alt="Simple Trees">
            </div>
            <div class="img">
                <p>heres SOME IMAGE</p>
            </div>
        </article>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

由于project-elem只有padding没有margin，所以类“project-elem”的不同元素之间没有间隙

根据您的要求将填充更改为边距，如下所示：

.project-elem {
  background-color: greenyellow;
  margin-top: 5rem;
  margin-bottom: 5rem;
  height: 300px;
}

.projects {
  margin: 0;
  padding: .7rem;
  background-color: #DDCDE8;
  font: Asap, sans-serif;
  height: 1000px;
}

.project-n {
  background-color: green;
  text-align: center;
  width: 60%;
  float: left;
  padding: 2.5rem;
}

.img {
  background-color: blue;
  text-align: center;
  padding: 3rem;
  margin-left: 40%;
}

了解内边距和边距之间的区别。你可以参考这个：https://stackoverflow.com/a/2189462/12774953

【讨论】：

【解决方案3】：

您可能需要margin-bottom 而不是padding-bottom；

通过使用填充，您不会将它们分开，填充的工作方式类似于from-inside。

您可以阅读 box-model here 以了解这一点。

【讨论】：