如何在不影响其内容的情况下调整元素的宽度答案

【问题标题】：How to adjust width of an element without influnece its content如何在不影响其内容的情况下调整元素的宽度
【发布时间】：2019-03-24 05:07:23
【问题描述】：

你好（这里是Baguette英文）所以我的问题是一个元素无缘无故太大，我想知道如何解决它我试图改变宽度和填充，但它似乎不起作用看左上角的块太宽了

我发布了 facebook 徽标的 css，但它们都一样

  .reslogo  {
  position: fixed;
  z-index: 200;
  top: 0px;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  color:#fcecd9;
  width: auto;

}



  .facebook{
    left: 0%;
    top:-10%;
    animation-name: logofb;
    animation-duration: 0.5s;
    animation-delay: 7.5s;
    animation-fill-mode: forwards;
    transition-property: top;
    -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
}

  @keyframes logofb  {
    from {top:-10%;}
    to {top: 0%;}
  }

  .facebook:hover {
    margin-top: 2%;
    box-shadow: 10px 5px 5px black;

  }

<span class="facebook reslogo"><img src=facebook.png height="13%" width="13%"></span>
<span class="twitter reslogo"><img src=twitter.png height="13%" width="13%"></span>
<span class="devart reslogo"><img src=devart.png height="13%" width="13%"></span>
<span class="twitch reslogo"><img src=twitch.png height="13%" width="13%"></span>

我希望盒子与徽标完美契合

【问题讨论】：

标签： html css width

【解决方案1】：

你可以试试这个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="container-icons">
        <i class="fab fa-facebook-f icon"></i>
        <i class="fab fa-twitter icon"></i>
        <i class="fab fa-twitch icon"></i>   
    </div>

</body>
</html>

 *
{
    margin: 0;
    padding: 0;
}

.container-icons
{
    background: #333;
    display: flex;
    height: 30px;
}

.icon
{
    color: #FFF;
    font-size: 20px;
    padding: 5px;
}

Result

【讨论】：