Как настроить ширину элемента без влияния на его содержание - PullRequest
Новая
       10

Как настроить ширину элемента без влияния на его содержание

0 голосов
/ 23 марта 2019

Здравствуйте (багет на английском здесь). Так что моя проблема в том, что элемент слишком велик без причины, и я хотел знать, как его исправить. Я пытался изменить ширину и отступ, но, похоже, это не работает Посмотрите в верхнем левом углу, блок слишком широкий

Я публикую css логотипа Facebook, но он одинаков для всех них 

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

Я хочу, чтобы коробка идеально подходила для логотипа

1 Ответ

0 голосов
/ 24 марта 2019

вы можете попробовать это. 

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

Результат

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...