Search code examples
htmlcssimagepadding

HTML and CSS image padding not functioning

I'm currently making a website involving images. I've used an image from https://plchldr.co/i/336x280?&bg=ffffff&text=. The code for the images is:

<div style = "padding: 20px 0px;">
  <img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=">
</div>

<div style = "padding: 20px 0px;">
  <img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=" >
</div>

<div style = "padding: 20px 0px;">
  <img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffffff&text=">
</div>

However, when I did this, the images vertically stacked, instead of stacking horizontally. I am using text-align: center; for the entire body, but I don't think that should effect this. If you wish to see the website's code, it is at codeitfast.xyz

I have tried putting padding around the boxes. However, they have shadowing around them when I do this, and it looks quite bad (I'm using a box-shadow). I've also tried to add padding to divs. Neither of these have helped, and I'm open to most suggestions.

Solution

  • DIV's are 100% wide by default, so you need to set the wrapping DIV's width, set them to inline-block so they will align horizontally, and then set the image's width relative the wrapper DIV's class.

    <!doctype html>
<html lang="en">
<head>
  <style>
      .project{
          width:100%;
       }
      .projectWrapper{
           display:inline-block;
           width:calc( 33% );
           padding: 20px 0px;
       }
  </style>  
</head> 
<body>

<div class="projectWrapper">
    <img class = "project" src = "https://plchldr.co/i/336x280?&bg=ff0000&text=">
</div>

<div class="projectWrapper">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=ffff00&text=" >
</div>

<div class="projectWrapper">
<img class = "project" src = "https://plchldr.co/i/336x280?&bg=000fff&text=">
</div>

</body>
</html>