К тегу a прибавляеца размер от margin когда внутри него что-то есть

Question

К тегу a прибавляеца размер от margin когда внутри него что-то есть

Lasmik Знаток (295), на голосовании 10 месяцев назад

есть код

html

<div id="header-1">
<img src="img/logo.png" alt="error">
<div id="header-1-text">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Projects</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>

css

div#header-1{
height: 120px;
display: flex;
align-items: center;
}
#header-1 img{
margin-left: 150px;
}
#header-1-text{
margin-left: 100px;
}
#header-1-text a{
font-family: "Raleway-SemiBold", sans-serif;
font-size: 18px;
padding-left: 30px;
color: #1175b7;
text-decoration: none;
}

я менял и display, и margin с padding местами и position и border(на 0)
но ссылка кликаеца все равно вместе с margin

Answer 1

Давид Мейстер Мастер (2089) 12 месяцев назад

Лично я изначально прописываю:

 * { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

Это позволяет избавится от большинства проблем которые делает изначально css

LasmikЗнаток (295) 12 месяцев назад

box-sizing: border-box; я тоже пробовал
также забыл сказать что у меня стоит
reset.css
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

Давид Мейстер Мастер (2089) Михаил Остренко, Вижу только padding, о каком margin идёт речь?

LasmikЗнаток (295) 12 месяцев назад

блин спасибо я только что поменял все нормально заработало час не мог понять в чем проблема

Давид Мейстер Мастер (2089) Михаил Остренко, Могу по советовать зайти в элементы

Нажать на значок курсора

и наводится на элементы, там уже видно у чего какой margin, padding, gap и т.п.

LasmikЗнаток (295) 12 месяцев назад

я это знаю.
я когда box-sizing: border-box; применял у меня паддинг стоял вместо марджина и он не сработал как мне надо было

Давид Мейстер Мастер (2089) Михаил Остренко, Лучше использовать flex и gap, и не парится