如何为图片添加15px底部空白？两种方案无效求有效解决方法

Let's break down why your initial attempts didn't work and fix this issue step by step.

Your Current Code #

First, here's the HTML and CSS you're working with:

HTML

<body>
 <div class="box3">
 <li>
 <img src="pictures/contact/skype.png" width="34px" height="34px" />
 <span>Skype name</span>
 </li>
 <li>
 <img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
 <span>Gadu-Gadu number</span>
 </li>
 <li>
 <img src="pictures/contact/email.png" width="34px" height="34px" />
 <span>Email address</span>
 </li>
 </div>
</body>

CSS

body { left: 8%; top: 10%; position: absolute; background-color: #6699cc; }
.box3 { background-color: #191919; position: absolute; padding: 15px 40px 0px; font-size: 12px; color: #DDDDDD; font-family: Verdana; font-size: 12px; width: 400px; }
.box3 > li { display: flex; align-items: center; }
.box3 > li span { margin: 5px; }

Why Your Original Solutions Failed #

Your two attempts (margin-bottom or padding-bottom on the image) didn't work because each <li> is a flex container with align-items: center. This setting vertically centers all child elements (the image and span) within the li. When you add bottom spacing to the image, the flex container's centering behavior cancels out the visible space—since the container adjusts to keep items centered, the extra padding/margin doesn't change the layout.

Working Fixes #

Here are three reliable ways to get the 15px space below each image:

1. Add Padding to the Bottom of Each List Item

This is the simplest approach—it adds space inside each li, which creates the desired gap below the image (and the entire list item content):

.box3 > li {
  display: flex;
  align-items: center;
  padding-bottom: 15px; /* Add this line */
}

Since your .box3 has padding-top: 15px, this will keep consistent spacing between the top of the box and the first item, and between each item.

2. Add Margin to the Bottom of Each List Item

If you prefer spacing outside the li (instead of internal padding), use margin-bottom:

.box3 > li {
  display: flex;
  align-items: center;
  margin-bottom: 15px; /* Add this line */
}

Pro tip: To avoid extra space at the bottom of the .box3 container, remove the margin from the last list item:

.box3 > li:last-child {
  margin-bottom: 0;
}

3. Adjust Flex Alignment to Make Image Spacing Work

If you specifically want the space attached directly to the image (not the entire list item), change the flex container's alignment to flex-start (instead of center). This lets the image's margin-bottom take effect:

.box3 > li {
  display: flex;
  align-items: flex-start; /* Change from center */
}
.box3 > li img {
  margin-bottom: 15px; /* Now this works */
}

Note: This will align the image and span to the top of the li instead of centering them vertically—only use this if that's the visual you want.

Quick HTML Best Practice Note #

Just a heads-up: <li> elements should always be wrapped in a <ul> or <ol> container (not directly inside a <div>). This is standard HTML and helps with accessibility and browser rendering. Here's the corrected structure:

<div class="box3">
  <ul>
    <li>
      <img src="pictures/contact/skype.png" width="34px" height="34px" />
      <span>Skype name</span>
    </li>
    <li>
      <img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
      <span>Gadu-Gadu number</span>
    </li>
    <li>
      <img src="pictures/contact/email.png" width="34px" height="34px" />
      <span>Email address</span>
    </li>
  </ul>
</div>

If you update the HTML, you'll need to adjust your CSS selector to .box3 ul > li instead of .box3 > li.

内容的提问来源于stack exchange，提问作者user13371526