Tea Cozy Project - Proper spacing between images of teas?

I’m only about halfway finished with the Tea Cozy project, and despite numerous attempts to get 10px of spacing between the images of teas in the middle of the page, I can’t get it to work. I’ve tried using padding on the images, figs, and section to no avail. I’ve also tried setting the section width to 1000px, but that just wraps the 3rd image down to the line below.

I’ve never written here before, so I hope I share my code properly. Any help is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Resources/CSS/index.css">
    <title>Tea Cozy</title>
</head>
<body>
    <header class="navbar">
    <img src="img-tea-cozy-logo.png" class="logo" alt="Tea Cozy">
      <nav>
        <span class="navbar">Mission</span>
        <span class="navbar">Featured Tea</span>
        <span class="navbar">Locations</span>
      </nav>
    </header>
    <div class="mission">
        <img src="img-mission-background.jpg" class="missionBackground">
        <div class="ourMissionText">
          <h2>Our Mission</h2>
          <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>
    <div class="teaOfMonth">
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at the Tea Cozy?</h4>
    </div>
<section>
    <div class="menu">
        <figure id="berryBlitz">
            <img src= "img-berryblitz.jpg" class="berryBlitz">
            <h4>Fall Berry Blitz Tea</h4>
        </figure>
        <figure id="spicedRum">
            <img src="img-spiced-rum.jpg" class="spicedRum">
            <h4>Spiced Rum Tea</h4>
        </figure>
        <figure>
            <img src="img-donut.jpg" class="donut">
            <h4>Seasonal Donuts</h4>
        </figure>
        <figure>
            <img src="img-myrtle-ave.jpg" class="myrtleAve">
            <h4>Myrtle Ave Tea</h4>
        </figure>
        <figure>
            <img src="img-bedford-bizarre.jpg" class="bedford">
            <h4>Bedford Bizarre Tea</h4>
        </figure>
    </div>
</section>


body {
    font-family: Helvetica;
    font-size: 22px;
    background-color: black;
    color: seashell;
}

header {
    height: 69px;
    top: 0px;
    border-bottom: 1px solid seashell;
    position: fixed;
    background-color: black;
    width: 100%;
    z-index: 1;
}

span {
    float: right;
    padding: 20px;
    z-index: 9;
    display: inline-flex;
    text-decoration: underline;
}

.logo {
    padding-left: 10px;
    height: 50px;
    position: absolute;
    padding-top: 8px;
}

.ourMissionText {
    position: absolute;
    bottom: 70px;
    background-color: black;
    width: 100%;
}

.mission {
    text-align: center;
    padding-top: 60px;
}

.teaOfMonth {
    text-align: center;
}

section .menu {
    display: inline-flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
}

section img {
    height: 200px;
    width: 300px;
    padding: 10px;
}

Welcome to the forums :slight_smile:

You should play with the inspect element, you’ll be surprised at how much you can find visually (and not just with your mouse over the screen, but if you move it over the code it highlights hidden elements).

So the biggest issue right now is that you have a lot of objects inside of objects doing things. If you have a goal, its easier to simplify and work up.

The figure tags actually add their own invisible padding here, so if you turn those to divs or spans it should cover that. The inspect element tool is great for sussing out hidden effects like these.

Padding vs. margin is another thing to consider. Remember that padding adds to both sides, so if you want 10 flush you have to make it a padding of 5, BUT that will also affect the outer rims. So if the padding is set at 5px, your box width is 300x3, there’s +10 padding in-between each box, and you have to add in the padding from the right and left outer side (+10). If you want there to be three boxes, you container would have to be 930 px wide (for the tightest fit).

To troubleshoot, I would change the background color and set all the elements you’re working with to have different outline colors (for example: outline: solid; outline-color:red;).

If you set the padding to 5px right now and take away the figures you’ll probably get 4 or 5 boxes since your container of the images is just the whole screen (but that’ll be dependent on screen size since it’s responsive). One way to manage that is to keep your image container width explictly between 930 and 1240px.

Here’s some further reading on the figure extra margin (https://stackoverflow.com/questions/40029186/removing-space-under-html-figure-tag-with-image)

2 Likes

Thank you for the thorough recommendations! :+1:

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.