Why is there space between two elements even though margins and padding are supposed to be 0px

Web Development Front-End
1

In Tea Cozy Project in the Tea of The Month section there are five images with three images on one row and the other two images on the row below. In the screenshot i have attached to this message you can see that I have highlighted the heading ‘Bedford Bizarre Tea’. I have set the top margin for this heading to 0px and also in the CSS i have set the figure elements to have margins of 0px. Yet despite this as you can see in the attached screenshot

Screenshot 2024-03-30 150313 teaofmonthsection
Screenshot 2024-03-30 150313 teaofmonthsection999×483 50 KB

, there is a clear space between the top of the image heading and the bottom of the image. Any ideas as to what could be causing this space.

image
image665×675 87.8 KB

image
image478×667 98 KB

image
image
image

2

Hi there! Please never share your code as screenshots, it has no sense almost at all.
Share your full HTML and CSS properly (how to do: Format code in posts) or provide your deploy link (GitHub Pages, etc.) if you have it. Thanks

1 Like
3

What is wrong with sharing screenshots? I thought it helps to share screenshot so people can understand my issue better by looking at the code. Is it better to format the code like you say because you can then easily copy and paste the code?

4

Here is the html:

<section class="teaimageslinetwo">
      <div class='imagefoursection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg"/>
        </figure>
        <h4>Myrtle Ave Tea</h4>
      </div>
      <div class='imagefivesection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg"/>
        </figure>
        <h4>Beford Bizarre Tea</h4>
      </div>
    </section>

Here is the CSS:

.imageonesection,.imagetwosection,.imagethreesection,.imagefoursection,.imagefivesection {
  text-align: center;
} 

.teaimageslinetwo {
  display: flex;
  background-color: red;
  width: 1000px;
  margin: auto;
  justify-content: center;
}

.imagefoursection {
  padding-right: 50px;
}

.teaimageslinetwo h4 {
  margin-top: 0px;
}

.imagefivesection h4 {
  background-color: blue;
  
}

figure {
  margin: 0px;
  
}
5

Of course! How to debug code on the screenshots? Dunno :slightly_smiling_face:

6

Well, thank you, this is a proper way. But now please share your full HTML and CSS, the issue can be in absolutely unpredictable place, far from this chuck of code.

7 
<!DOCTYPE html>
<html>
  <head>
    <title>The Tea Cozy</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
  <!-- header section -->
    <header class='logo'>
      <figure>
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" class='teacozy'/>
      </figure>
      <nav class='nav'>
        <p>Mission</p>
        <p>Featured Tea</p>
        <p>Locations</p>
      </nav>
    </header>
    <section class='hero'>
      <div class='ourmissiontext'>
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
      </div>
    </section>
      
  <!-- tea of month section -->
    <div class='teaofmonthtext'>
      <h2>Tea of the Month</h2>
      <h4>What's Steeping at The Tea Cozy?</h4>
    </div>
    <section class='teaimageslineone'>
      <div class='imageonesection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg"/>
        </figure>
        <h4>Fall Berry Blitz Tea</h4>
      </div>
      <div class='imagetwosection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg"/>
        </figure>
        <h4>Spiced Rum Tea</h4>
      </div>
      <div class='imagethreesection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg"/>
        </figure>
        <h4>Seasonal Donuts</h4>
      </div>
    </section>
    <section class="teaimageslinetwo">
      <div class='imagefoursection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg"/>
        </figure>
        <h4>Myrtle Ave Tea</h4>
      </div>
      <div class='imagefivesection'>
        <figure class='teaofmonthimages'>
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg"/>
        </figure>
        <h4>Beford Bizarre Tea</h4>
      </div>
    </section>
  <!-- locations section  -->
    <section class='locations'>
      <div class='locationsheading'>
        <h2>Locations</h2>
      </div>
      <section class='locationsections'>
        <div class='locationone'>
          <h3>Downtown</h3>
          <p>384 West 4th St</p>
          <p>Suite 108</p>
          <p>Portland, Maine</p>
        </div>
        <div class='locationtwo'>
          <h3>East Bayside</h3>
          <p>3433 Phisherman's Avenue</p>
          <p>(Northwest Corner)</p>
          <p>Portland, Maine</p>
        </div>
        <div class='locationthree'>
          <h3>Oakdale</h3>
          <p>515 Crescent Avenue</p>
          <p>Second Floor</p>
          <p>Portland, Maine</p>
        </div>
      </section>
    </section>  
  </body>
</html>

CSS:

 body {
    font-family: helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    margin: 0px;
    }

  figure {
  margin: 0px;
  }

.logo {
  background: #91A7BB;
  display: flex;
  justify-content: space-between;
  max-height: 69px;
  align-items: center;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  }

.teacozylogo {
  margin-left: 10px;
}

.nav {
  display: flex;
  flex-basis: 400px;
  justify-content: space-around;
  text-decoration: underline;
  }

.teacozy {
  max-height: 50px;
  background: red;
  }

.hero {
  min-height: 700px;
  width: 1200px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  align-content: center;
  text-align: center;
  margin: auto;
  }

.ourmissiontext {
  background-color: black;
  width: 100%;
  align-content: center;
  }

.teaofmonthtext {
  text-align: center;
}

.teaofmonthimages img {
  max-width: 300px;
  height: 200px;
}

.teaimageslineone {
  display: flex;
  background-color: red;
  width: 1000px;
  margin: auto;
  justify-content: space-between;
}

.imageonesection,.imagetwosection,.imagethreesection,.imagefoursection,.imagefivesection {
  text-align: center;
} 

.teaimageslinetwo {
  display: flex;
  background-color: red;
  width: 1000px;
  margin: auto;
  justify-content: center;
}

.imagefoursection {
  padding-right: 50px;
}

.teaimageslineone h4 {
  margin-top: 10px;
}

.teaimageslinetwo h4 {
  margin-top: 0px;
}

.imagefivesection h4 {
  background-color: blue;
  }

.locationsheading {
  text-align: center;
  background-color: red;
}

.locationsections {
  display: flex;
  width: 1200px;
  margin: auto;
  justify-content: center;
}

.locationone,.locationtwo,.locationthree {
  width: 300px;
  background-color: black;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 0px;
  }

  .locations {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
    width: 1200px;
    margin: auto;
    min-height: 500px;
    align-content: center;
  }
8

Thank you!
To remove that space set this rule:

img {
    vertical-align: top;
}

The result:

Show image

FireShot Capture 024 - A Pen by Ray - codepen.io
FireShot Capture 024 - A Pen by Ray - codepen.io837×870 42.9 KB

Another default styles better be set correctly before the work.

1 Like
9

I am surprised that the img element has a default value as it isn’t mentioned in w3schools default values; it only says default value is display: inline-block.

10

Yes, check this:

baseline

Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.

And we see:
Typical replaced elements are:

Here it is, the reason to set it to top

11

I don’t understand how this vertical-align is working. When the img element is set to ‘top’, the element is supposed to align with the tallest element on the line. From what I can see, even when the vertical-align is set to the default of baseline, the img element is still aligned with the tallest element on the line. The only difference that I can see is when set to 'top, the whole section (class=teaimageslinetwo) is slightly shorter in height.

12

Screenshot 2024-03-31 vertical align set to default
Screenshot 2024-03-31 vertical align set to default1120×433 284 KB

In the first screenshot the vertical align is at the default value of baseline. So the image element is supposed to be aligned with the baseline of the parent. In this case the parent is the figure element. I have given the figure element an orange background so you can see in screenshot.

Screenshot 2024-03-31 vertical align set to bottom
Screenshot 2024-03-31 vertical align set to bottom1066×433 284 KB

In the second screenshot the vertical align is set to bottom. So the image is supposed to be aligned with the lowest element on the line. What is the lowest element on the line that it is supposed to be aligning with? Also why is the orange background of the figure element no longer visible? When I set vertical align to top, the page looks exactly the same as when it is set to bottom.

13

So when vertical align is set to the default baseline, the figure element (orange background) which is the parent element, has a greater height. The section (green background) which is the grandparent of the image element is expanded in height also.
This vertical align property is by far the strangest property I have come across in CSS so far. Doesn’t make a lot of sense what it is supposed to be aligning to.

14

img tag is inline element. you can put it in div or change image in css through display property to block