Question

这是我的社交媒体栏的CSS。它应该在我页面的右侧。当我使用margin或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具有标准和高度，如果给予子边距，它会使空间越来越小。

例如，如果您给出高度为50px且边距为30xp的左侧（50px - 30px）= 20px空间以填充自己。

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

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

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

Answer 2

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

为什么我的图像会变小，当我给它们留下一个边距或向左浮动它们？

2 个答案: