Why does my div move when I add elements to it?

I’m writing a code to make a sort of card. Each of the cards has a main div (card1, card2, card3 in the code below), and a smaller div at the top to contain the title (card1i, card2i, card3i in the code below). Here is the code for that and here are pictures:

<div id="howitworks">
        <div id="cards"> 
            <div id="card1">
                <div id="card1i">
                </div>
               
            </div>
            <div id="card2">
                <div id="card2i">
                   
                </div>
            
            </div>
            <div id="card3">
                <div id="card3i">
                 
                </div>
               
            </div>
        </div>
    </div>

(css)

    #cards {
    margin: auto;
    width: 85%;
    display: flex;
    justify-content: space-evenly;
     }

    #card1 {
    border-radius: 5px;
    width: 250px;
    height: 250px;
    box-shadow: 0 10px 20px rgba(122, 112, 112, 0.8);
     }

    #card2 {
    border-radius: 5px;
    width: 250px;
    height: 250px;
    box-shadow: 0 10px 20px rgba(122, 112, 112, 0.8);
     }

    #card3 {
    border-radius: 5px;
    width: 250px;
    height: 250px;
    box-shadow: 0 10px 20px rgba(122, 112, 112, 0.8);
      }

    #card1i {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    width: 100%;
    height: 20%;
    background-color: rgb(193, 197, 134);
      }

    #card2i {
    width: 100%;
    height: 20%;
    background-color:  rgb(193, 197, 134);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    
     }

    #card3i {  
    width: 100%;
    height: 20%;
    background-color:  rgb(193, 197, 134);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    
      }

Here is what it looks like before I add a title to the card:

But when I add a paragraph, or an h2 or any other element to the smaller divs(card1i, card2i, card3i), the divs come down.

Please is there something I’m doing wrong?

<p> and <h2> elements come with a default margin. What happens if you use a <span> for the text instead?

1 Like

It worked! Thank you!
What exactly does do?

Many elements in HTML (all the <h1> to <h6>, <p> , etc) have default margins and/or paddings, so that the text has some space around it. If you add such an element to the top of your card, its margin-top nudges it down a litte. You can see that yourself if you replace the <span> with a <h2> again, and then remove the margin and padding from it.

1 Like