为什么当我给它们留有边距或将它们向左浮动时，我的图像会变小？答案

【问题标题】：Why do my images get smaller when I give them a margin-left or float them left?为什么当我给它们留有边距或将它们向左浮动时，我的图像会变小？
【发布时间】：2018-09-13 23:42:57
【问题描述】：

这是我的社交媒体栏的 CSS。它应该在我页面的右侧。当我使用边距或浮动时，图像变得非常小。

.facebook {
  width: 72.8%;
  height: auto;
  margin-left: -9%;
  margin-top: 14%;
}

.insta,
.twitter {
  width: 49.2%;
  height: auto;
}

.social {
  list-style-type: none;
  position: fixed;
  margin-left: 95%;
}

<div class="social">
  <a href="#"><img src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" class="facebook" alt="Facebook Logo"></a>
</div> <br> <br> <br> <br>
<div class="social">
  <a href="#"><img src="https://www.freeiconspng.com/uploads/-van-nederland-elgie-gaat-haar-ontwikkeling-posten-op-twitter-24.png" class="twitter" alt="Twitter Logo"></a>
</div> <br> <br> <br>
<div class="social">
  <a href="#"><img src="https://midflokkurinn.is/wp-content/uploads/2017/11/250ig.png" class="insta" alt="Instagram Logo"></a>
</div>

【问题讨论】：

我在这部分代码中没有看到问题，应该在您网站上的其他代码中。
我也放入了我的html。有问题吗？
HTML 要么是白色字体，要么我是盲人，要么你忘了添加；)
对不起。您现在应该可以看到它了

标签： html css image margin

【解决方案1】：

父 div 有一个标准的高度和高度，如果你给子 div 边距，它会使它拥有的空间越来越小。

例如，如果你给某个东西一个 50px 的高度和 30xp 的边距，它的左边有 (50px - 30px) = 20px 的空间来填充它自己。

U 应该给图像一个高度，例如

.facebook, .insta, ,twitter { 
   height: 50px;
   width: 50px;
}

然后你可以给它任何你想要的边距。

【讨论】：

【解决方案2】：

您应该将它们包装在一个容器中并在其上设置定位。以 95% 的左边距将图标向右隔开不会给你带来好的结果。将您的标签设置为显示块并为您的图像提供一致的尺寸，您将被设置。最后，使用 br 标记对于间距来说不是很好的做法。如果您需要调整间距，例如在移动视图上，它将给您带来噩梦。您将需要使用填充或边距。这是一个例子：

#social-container {
  position: fixed;
  top: 10px;
  right: 0px;
  width: 20px;
}

.social {
  display: block;
  margin-bottom: 10px;
}

.social:last-child {
  margin-bottom: 0px;
}

.social a {
  display: block;
}

.social img {
  display: block;
  width: 20px;
  height: 20px;
}

<div id="social-container">
  <div class="social">
    <a href="#">
      <img src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" class="facebook" alt="Facebook Logo">
    </a>
  </div>
  <div class="social">
    <a href="#">
      <img src="https://www.freeiconspng.com/uploads/-van-nederland-elgie-gaat-haar-ontwikkeling-posten-op-twitter-24.png" class="twitter" alt="Twitter Logo">
    </a>
  </div>
  <div class="social">
    <a href="#">
      <img src="https://midflokkurinn.is/wp-content/uploads/2017/11/250ig.png" class="insta" alt="Instagram Logo">
    </a>
  </div>
</div>

【讨论】：