HTML 和 CSS 图片填充不起作用

Question

我目前正在制作一个涉及图片的网站。我使用了来自 https://plchldr.co/i/336x280?&bg=ffffff&text= 的图像。图片的代码是：

<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>

但是，当我这样做时，图像是垂直堆叠的，而不是水平堆叠的。我在整个 body 中使用 text-align: center;，但我认为这不会对此产生影响。如果您想查看该网站的代码，请访问 codeitfast.xyz

我试过在盒子周围放置填充物。但是，当我这样做时，它们周围有阴影，看起来很糟糕（我使用的是 box-shadow）。我还尝试向 div 添加填充。这些都没有帮助，我愿意接受大多数建议。

Answer 1

DIV 默认为 100% 宽，因此您需要设置环绕 DIV 的宽度，将它们设置为 inline-block 以便它们水平对齐，并且然后设置图像相对于 wrapper DIV 的 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>

HTML 和 CSS 图片填充不起作用

HTML and CSS image padding not functioning

html

css

image

padding