Padding on a flex item nudges a neighboring flex item out of place

Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes the fourth div below it even further down. Any insights on what might be causing this behavior?

<!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

Answer №1

Try utilizing the gap property as an alternative to margin for creating space between rows and columns.

Answer №2

Does this match what you're searching for? Take a look at the code snippet below.

*
{
  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%;
  grid-gap: 50px;
}


.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,.witcher-s2
{
  max-width: 100%;
  height: auto;
  margin-bottom: 50px;
}
<div class="section1-container">
      <div class="item main-story">
        <img class="vinland-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
        <h4>Anime</h4>
        <h3>Vinland Saga Season 2 Announced</h3>
      </div>

      <div class="item sub-story">
        <img class="witcher-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
        <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>Have something to share with us?</h3>
        <p>
          At VRP, we value your insights and stories. Start today by grabbing
          your phone and visiting our official journalist site to enroll in a course!
        </p>
      </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images that dynamically adjust to different screen sizes with captions that are perfectly

For a while now, I have been utilizing <picture> to display images with more design control. I typically use CSS to show or hide specific images within the <div> block. However, I am now considering using <figure> with <figcaption> ...

cssresponsive

What is the best way to add multiple classes to an HTML element?

Can a single HTML container have more than one class assigned to it? For example, would the following code work: <article class="column wrapper"> ...

htmlcss

The error message received states: "materialize-css Uncaught TypeError: Vel is not defined as

My current setup involves webpack as the bundler/loader, and I've successfully loaded materialize css (js/css). However, when attempting to use the toast feature, an error is thrown: Uncaught TypeError: Vel is not a function The library is being inc ...

javascriptcssnpmwebpackmaterialize

bottom of the page contains the solution

I am currently working on creating a print stylesheet for my website. On each page, there is a footer that needs to be positioned at the bottom of the printed page, but only if there is a spacing of 30pt between the main content and the footer. In cases wh ...

cssprinting

Is it possible to trigger the @click event in Vuejs when utilizing v-html to render HTML content?

Here is an interesting HTML scenario: errorText: '<a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>'; I am trying to insert this string into the following div: <div v-if="hasIssue != ...

javascripthtmlvue.jsonclickrender

Google Fonts are displaying in a bold style even when the bold property is not set

I need assistance with an issue involving emails going from Salesforce to Outlook 365. Here is the HTML code snippet: <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <style> body ...

htmlemailoutlookgoogle-font-api

Blazor combines the power of both C# and JavaScript by allowing them to be executed in a single

There is a button that triggers a JavaScript function: <button class="btn-orange btn" onclick="expand(this.closest('.profile'))">JavaScript</button> And there is another button that executes C# code and toggles ic ...

javascriptc#htmlblazor

What is the best way to align a modal with a layout when it appears far down the components hierarchy?

Struggling with creating a React modal and facing some issues. Let's consider the structure below: React structure <ComponentUsingModal> <Left> <ButtonToActivateModal> ... </ButtonToActivateModa ...

javascripthtmlcssreactjs

Discover the simple steps to integrate a timezone dropdown feature into your WordPress website using the Contact Form 7 plugin

I am designing a website and I need to implement a query form with a customizable time zone selection. Are there any specific steps to add a time zone drop-down menu using Contact Form 7? Here is the desired result I'm aiming for: Your assistance wil ...

htmlwordpressdrop-down-menuwordpress-themingcontact-form-7

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

htmlcss

Using Jquery's closest technique to target a class located outside of the parent div

I am having trouble accessing a class outside of its parent div $(document).on('click', '.delete_photo', function(event){ var del_id = $(this).attr('id'); $.ajax({ type:'POST', cache: false, url:&apo ...

javascriptjqueryhtmlcss

Tips for sending parameters to XSLT using a Javascript function

Despite my efforts to find a solution in various online posts, I haven't been able to resolve the issue. The challenge lies in my HTML file that includes a JavaScript function for parsing XML and rendering XSLT. I have multiple 'records' in ...

javascripthtmlxmlxsltxml-parsing

Analyzing JSON information and presenting findings within a table

Requesting user input to generate a JSON object based on their response. Interested in showcasing specific details from the object in a table format for user viewing. Questioning the efficiency and clarity of current approach. My current progress: In HTM ...

javascripthtmljson

How come my HTML form keeps refreshing instead of displaying an alert after submission, even though I've included onsubmit="return false"? Additionally, it seems to be throwing an error

Why is this basic HTML and JavaScript code not functioning properly? Instead of alerting once the form is submitted, it refreshes the page and throws an error. It has also been reported to sometimes throw a CORS error when using 'module' as scri ...

javascripthtml

Using jQuery to smoothly animate a sliding box horizontally

Is there a way to smoothly slide a div left and right using jQuery animation? I have been trying to achieve this by implementing the code below, which can be found in this fiddle. The issue I am facing is that every time I click on the left or right butto ...

javascriptjqueryhtmlcssjquery-animate

Remove all HTML tags except for those containing a specific class

Looking for a regex that removes all HTML tags except the "a" tags with the "classmark" class For example, given this HTML string: <b>this</b> <a href="#">not match</a> <a href="#" target="_blank" ...

javascripthtmltagsstrip

Issues with the local or browser display of @font-face

I'm really struggling to get my @font-face to display correctly, whether I view it locally or in the browser preview. This is the CSS code I am using: @font-face { font-family: chopin-script.regular; src: local('chopin-script.regular'), ...

htmlcssfontsfont-face

Determine the number of input tags within a div element by utilizing the closest property in jQuery

Sorry for the silly question, but I've been struggling to find a solution. Spent hours scratching my head. Here is my HTML structure: <div class= 'container'> <div class="someclass"> <input>some content</in ...

javascriptjqueryhtml

Steps for adding a stroke to just the left and right sides of an SVG wave:

How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)? <svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="wave"> <svg viewBox="0 0 100 50" ...

htmlcsssvg

Adaptive website backdrop

I have created a unique background for my website design, which includes 3 slices labeled as div id top, middle, and bottom. You can view the design in this image. I am interested in making this background responsive. While I have come across examples of ...

htmlcssresponsive-design