Почему картинка вылезает за пределы блока?

Question

[sinevik]

<div id="main">
	<header id="header">
		<a><img id="google" src="img/google.png"></a>
	</header>
	
</div>

@font-face {
font-family: "OpenSans";  
src: url("fonts/OpenSans-Regular.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal;
}

body{
	margin: 0;
	padding: 0;
}

#main {
	max-width: 1366px;
	margin: 0 auto 0;
}

#header {
	width: 100%;
	height: 60px;
	line-height: 60px;
	background-color: #252323;
}
a {
	display: inline-block;
	width: 25px;
	height: 26px;
}

img {
	display: inline-block;
	width: 25px;
	height: 26px;
}

Подскажите почему картинка вылезает за пределы блока a?

Answer 1

[Ankhena]

Потому что вы задали display: inline-block;
Сделайте картинку просто блочной или задайте vertical-align: top
https://webref.ru/css/vertical-align

https://jsfiddle.net/L0e9kp2t/

p.s. не используйте id для стилизации, пишите классы.

Comments

[whiteredfox]

Я так выровняла картинку внутри ссылки внутри текста. display: inline-block установила у img, а с высотой vertical-align: bottom помогло) Мерси.

Answer 2

[Odisseya]

Вылазит из-за того, что #header имеет line-height: 60px; а блочно-строчные элементы выровнялись по базовой линии.

Comments

[sinevik]

И как с этим бороться? Просто у дочерних прописывать свой лайн хеит?

[sinevik]

Алексей Уколов,
Почему? Я прописал у дочернего свой, и нормально стало?

[Odisseya]

sinevik, можно использовать другой тип элементов (display: block) или явно задавать другой тип вертикального выравнивания (например, vertical-align: top) для блочно-строчных элементов.

[Ankhena]

sinevik,

Почему?

Потому что читайте спецификацию про инлайн-блоки и вертикальное выравнивание.
Лечить это с помощью line-height - костыль.

[sinevik]

Ankhena, Ну и как в данном случае правильно вылечить?

[Ankhena]

sinevik, эммм.. мой "Ответ написан 48 минут назад"

Answer 3

[Егор Лавренов]

Картинке пропиши max-width:100%; и height:auto;

Answer 4

[Overfinch]

overflow: hodden примени к элементу, за который не должна вылазить картинка.