why the padding applied to the item3 eventhough i did not apply it. i applied it only to the item4

Question

I tried applying padding only to the item4 but it also got applied to the item3 and the text inside the item3 is also not centered as i expected it to be.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="flexbox.css">
    <title>flexbox</title>
</head>
<body>
  <div class="container">
  <div class="container2">
    <p class="item1">item1</p>
    <p class="item2">item2</p>
  </div>  
  
  <div class="container2">
    <p class="item3">item3</p>
    <p class="item4">item4</p>
    
  </div>

</div>
</body>
</html>

--------------------------------------///css//------------------------------------------------------

.container{
    border: 1px solid black;
    background-color: rgb(255, 157, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:1rem;
}

.container2{
    display: flex;
    gap: 2em;

}

.container2 p{
    background-color: blue;
    border: 1px solid black;
  
}

.item4{
    padding:1rem;
    
}

I tried applying padding only to the item4 but it also got applied to the item3 and the text inside the item3 is also not centered as i expected it to be.

score 0 · Answer 1 · answered Nov 06 '22 at 10:29

below css fixes your issues, set the alignment on the container 2 aswell, and explicitly set the height on the item3 - it grows with item4 due to being in same container, it don't actually get the padding, just the height :)

.container{
    border: 1px solid black;
    background-color: rgb(255, 157, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:1rem;
}

.container2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;

}

.container2 p{
    background-color: blue;
    border: 1px solid black;
    
}
.item3{height: min-content;}
.item4{
    padding:1rem;
    
}

If i may suggest an alternative solution, go with css grids:

why the padding applied to the item3 eventhough i did not apply it. i applied it only to the item4

1 Answers1