I am trying to style images in a div class in css but it will not work for me. Why is this?-CodePudding

I'm trying to style a group of images or paragraphs in a certain way,

.products {
  margin: 40px;
  border-radius: 4px solid black;
}

<div > <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter"> <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter"> <img src="images/bodybutter1.jpg"
    style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter"> <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter"> </div>
<div >
  <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter">
  <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter">
  <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter">
  <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter">
</div>

CodePudding user response：

You'll need to target the img tag inside the parent instead of targeting the parent div. See code below:

.products img {
  margin: 40px;
  border-radius: 4px solid black;
}

You can use this to reduce code duplication.

CodePudding user response：

Note: The first property you have inline is missing the semicolon and breaking your code. Which may be why you are not seeing those styles applied to your image elements.

Because you are reusing the same style for every image you should remove those inline styles using the style attribute and use CSS to target those elements.

Check out the code for context. Hope this helps!

.products {
  margin: 40px;
  border-radius: 4px solid black;
}

.products img {
  width: 250px;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  max-width: 100%;
}

<div >
  <img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
  <img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
  <img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
  <img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
</div>
<div >
  <img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
  <img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
  <img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
  <img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
</div>