писал код в итоге пришло время до button и просто они на всю страницу

Рейтинг: -2Ответов: 1Опубликовано: 12.07.2023

введите сюда описание изображения

icon{ 
    padding-left: 846px;
    padding-top: 37px;
    padding-bottom:36px ;
    flex:auto;
    width:21.8px ;
    height:21.8px ;

}
.icon2{
    padding-left:42.2px ;
    padding-bottom:37.1px ;
    flex:auto;
    width:21.35px ;
    height: 21px; ;
}
.icon3{
    padding-left:42.2px ;
    padding-bottom:37.12px ;
    flex:auto;
    width:23.17 ;
    height:18.88 ;
}
.icon4{ 
    padding-left:43px ;
    padding-bottom:38px ;
    flex:auto;
    width:21px ;
    height: 17px; ;
}
.icon5{
    padding-left:46px ;
    padding-bottom: 39px;
    flex:auto;
    width: 9px; ;
    height:17px ;
}
.icon6{
    padding-left:61px ;
    flex:auto;
    width: 48px; ;
    height: 94px; ;
}
.icon7{
    padding-left:53px; 
    padding-bottom:37px ;
    flex:auto;
    width: 14px; ;
    height: 20px; ;
}
.icon8{
    margin-left:-10px ;
    padding-bottom:43px ;
    flex:auto;
    width: 12px; ;
    height: 8px; ;
}
.icon9{
    margin-left:-10px ;
    padding-bottom:37px ;
    flex:auto;
    width: 55px; ;
    height: 20px; ;
}
 <div class="d-grid gap-2 d-md-flex justify-content-md-end">
    
    
    <img class="logo" src="photo/ЛОГО.png" alt="">
    <button class="btn btn-primary me-md-2" type="button"><img class="icon" src="photo/инста.png" alt=""></button>

    <button ><img class="icon2" src="photo/линкедин.png" alt=""></button>
    <button ><img class="icon3" src="photo/твит.png" alt=""></button>

    <button><img class="icon4" src="photo/ector.png" alt=""></button>
    <button><img class="icon5" src="photo/Vetor.png" alt=""></button>

<button><img class="icon6" src="photo/Мова.png" alt=""></button>

<button><img class="icon7" src="photo/Vector.png" alt="">
        <img class="icon8" src="photo/Vtor.png" alt="">
        <img class="icon9" src="photo/вихід.png" alt=""></button>
</div>

css html button
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

У вас у каждой иконки разный размер, по этому они выглядят не одинаково. Добавьте всем иконкам одинаковую ширину и высоту, так они примут единый стиль:

.icon8 {
  width: 30px;
  height: 30px;
}

А чтобы убрать стили по умолчанию у кнопки необходимо добавить класс со свойствами padding и border, также в этот класс можно добавить другие стили которые присутствуют у всех ваших кнопок, например flex: auto;:

.button {
  padding: 0;
  border: none;
  flex: auto;
}