How to access and apply properties on only two of three divs within a div

Question

I'm trying to teach myself some web coding, so please bare with me. At the moment, I'm creating a modal page whose modal contents have three div elements (a close button, an image, and paragraph tags). I have applied some padding on the left side of the divs in the modal content divs because I wanted the image and the paragraphs to be spaced next to each other pretty nicely. However, I want the padding to only apply to the image and the paragraphs tags, and NOT the close button.

My question is, is there a way to apply padding to only the image and paragraph tags, but NOT the close button div.

CSS

#modalPage1{
        
        height: 100%;
        width: 100%;
        position:absolute;
        top: 0;
        background-color: rgba(255, 128, 213, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #modalPage1 > #modalContent1 {
        background-color: white;
        height:100%;
        width: 75%;
        display:flex;
        align-items: center;
        position:relative;
           
   }

   #close{
       position: absolute;
       top: 0;
       right: 14px;
       font-size: 50px;
       transform: rotate(45deg);
       padding:0%;
   }
   div > #modalTxt{
       width: 80%;
   }

    #modalContent1 > div {
       
       padding-left: 10%;
   }
   div > #modalImg{
    width: 353px;
    height: 447px;
   } 

HTML

<div ID= "modalPage1" class = "modalFish">
        
        <div ID = "modalContent1" class = "modalFishContent">
            
            <div ID="close">+</div>   

        <div><img ID= "modalImg" class= "modalFishImg" src="Images/Fish School.jpg"></div>
        <div><p ID = "modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, 
            I decided to use this as the background. Being that it's a dark color, it's easy to layer on different 
            colors that will coordinate well, while adding a pop to it. </p>

            <p ID = "modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
                to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces 
                appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is 
                in fact fish swimming in all different directions.
            </p>
            </div>
            
        
        </div>
    </div>

Answer 1

The CSS code you currently have below applies the padding to every div that's inside the div with id="modalContent1". That's a problem because you can't specify what elements you want the padding to apply to; if it's a div, it gets padded. You could change the button to something that's not a div, but any other divs you add would still get padded.

#modalContent1 > div {
   
   padding-left: 10%;
}

Instead of doing that, we can use classes instead, so only elements that belong to the class get padded. We can start by replacing the code above with the CSS below.

.padding {   
   padding-left: 10%;
}

This will apply the padding to every HTML element with class="padding". Now we just have to add the classes into the HTML. You used ID="modalTxt" in your HTML twice, but IDs should only be used once, so we can replace that with class="modalTxt" instead. Make sure you replace that in your CSS too so you can keep the width customization, just change the # in div > #modalTxt to a . like this:

div > .modalTxt{
   width: 80%;
} 

Multiple classes can be used as long as they're separated by spaces, and having a separate class for padding lets you customize the padding on its own, and the elements' other attributes on their own. So your HTML would look like:

<div ID= "modalPage1" class = "modalFish">
    
    <div ID = "modalContent1" class = "modalFishContent">
        
        <div ID="close">+</div>   

    <div><img ID= "modalImg" class = "modalFishImg padding" src="Images/Fish School.jpg"></div>
    <div><p class = "modalTxt padding">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, 
        I decided to use this as the background. Being that it's a dark color, it's easy to layer on different 
        colors that will coordinate well, while adding a pop to it. </p>

        <p class = "modalTxt padding">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
            to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces 
            appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is 
            in fact fish swimming in all different directions.
        </p>
        </div>
        
    
    </div>
</div>

One last thing, you can safely remove the "modalFishTmg" class if you're not going to use it in any other elements, since you're already styling the image with an ID. Also, the classes could go in the divs where you put your <img> and <p> tags, but that would give the padding to anything that's in the div, which could be a problem if you add anything else.