html - 弹性项目的边距会推动另一个弹性项目

问题描述

我有一个问题。我在一个 div 容器中有 4 个 div，我正在使用网格系统。由于某种原因，网格中的第三个 div 没有响应它应该如何响应。当我给它一个边距底部时，它不会从底部推动 div，而是将其下方的第四个 div 推得更远。关于我在这里缺少什么的任何想法？

<!DOCTYPE html>
<html>
  <head>
    <link rel = "shortcut icon" href = "images/icon.png">
    <title>News: U.S and World News Headlines: VPR</title>
    <link rel = "stylesheet" type = "text/css" href = "css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Secular+One&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Raleway:wght@200&family=Secular+One&display=swap" rel="stylesheet">
  </head>
    <body>


      <div class = "section1-container">
        <div class = "item main-story">
          <img class = "vinland-s2" src = "images/vinland-s2.jpg">
          <h4>Anime</h4>
          <h3>Vinland Saga Season 2 Announced</h3>
        </div>


        <div class = "item sub-story">
          <img class = "witcher-s2" src = "images/witcher-s2.jpeg">
          <h4>Movies/TV</h4>
          <h3>First Look At The Witcher Season 2<br>See The Cast Return As Their Beloved Characters<br>
            And Which Date They Will Be Appearing Again.
          </h3>
        </div>


        <div class = "item third-story">
            <h4>Japan</h4>
        <h3>Japan Animation Industry Sales Fall 1.8% In 2020,<br> First Drop In Decade. How Does This Affect
          The Future Of Anime?<br> A Lot Of Big Named Studios Share Their Thoughts And Plans.</h3>
        </div>



       <div class = "item fourth-story">
         <img class = "follow" src = "images/follow.jpg">
         <h3>Got anything you want to share?</h3>
         <p>At VRP, we welcome your tips and stories, get started today by taking out your phone<br>
           and visiting our offical journalist site to apply for a course!
         </p>
      </div>

</div>


    </body>
</html>





*
{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body
{
  background-color: rgb(237, 236, 232);

}

.section1-container
{
  width: 70%;
  display: grid;
  margin:300px 300px;
  grid-template-columns: 1fr 1fr;
  padding:2%;
  overflow:auto;
  background-color: white;
  border:1px solid lightgrey;
  padding-top: 5%
}


.sub-story
{
margin-left: 10%;

}

.third-story
{
  grid-column-start: 2;
  grid-column-end: 3;
  margin-bottom:100px

}

.fourth-story
{
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: lightgrey;
  text-align: center;

}


.vinland-s2
{
  width: 586px;
  height: 346px;
  padding-bottom: 5%
}

.witcher-s2
{
  width: 310px
}

标签： htmlcssflexboxmargin

html - 弹性项目的边距会推动另一个弹性项目

问题描述

解决方案

推荐阅读