html - 为什么当我给它们一个 margin-left 或将它们向左浮动时，我的图像会变小？

Question

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

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

Answer 1

父div有一个标准的with和height，如果你给child margin，它的空间会越来越小。

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

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

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

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