Adding padding to p tag not working, while it does with a class-CodePudding

When I include padding in the <p> tag it’s not working. However when I try to add it on the feature-box class it works perfectly.

<section id="features">
    <div >
      <div >
          <i ></i>
          <h3>Easy to use</h3>
          <p >So easy to use, even your dog< could do it.</p>
      </div>
      <div >
          <i ></i>
          <h3 >Elite Clientele</h3>
          <p >We have all the dogs the greatest dogs.</p>
      </div>
      <div >
          <i ></i>
          <h3>Guaranteed to work</h3>
          <p>Find the love of your dog's lifeyour money back.</p>
      </div>
  </div>
</section>

CodePudding user response：

Your question is very unclear but try to add this to your css:

p {
  padding: 2em;
}

CodePudding user response：

Your question is very unclear, maybe you need some padding top and bottom your p tag, then add my code it will work perfectly...

p{
  padding: 20px 0;
}

   <div >
        <i ></i>
        <h3>Easy to use</h3>
        <p >So easy to use, even your dog< could do it.</p>
    </div>
    <div >
        <i ></i>
        <h3 >Elite Clientele</h3>
        <p >We have all the dogs the greatest dogs.</p>
    </div>
    <div >
        <i ></i>
        <h3>Guaranteed to work</h3>
        <p>Find the love of your dog's lifeyour money back.</p>
    </div>
</div>

CodePudding user response：

Take a look at the below code:

.feature-box p {
  padding: 20px;
}

<section id="features">
    <div >
      <div >
          <i ></i>
          <h3>Easy to use</h3>
          <p >So easy to use, even your dog< could do it.</p>
      </div>
      <div >
          <i ></i>
          <h3 >Elite Clientele</h3>
          <p >We have all the dogs the greatest dogs.</p>
      </div>
      <div >
          <i ></i>
          <h3>Guaranteed to work</h3>
          <p>Find the love of your dog's lifeyour money back.</p>
      </div>
  </div>
</section>