當我給圖像留有邊距或向左浮動時，為什么圖像變小？

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標簽不是間隔的好習慣。 如果您需要調整間距，例如在移動設備視圖上，它將給您帶來噩夢。 您將要改用padding或margins。 這是一個例子：

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