@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?
rGPK87l4TGWsD7ebOxFUyQ.png
  • Вопрос задан
  • 43504 просмотра
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Потому что вы задали display: inline-block;
Сделайте картинку просто блочной или задайте vertical-align: top
https://webref.ru/css/vertical-align

https://jsfiddle.net/L0e9kp2t/

p.s. не используйте id для стилизации, пишите классы.
Ответ написан
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
Вылазит из-за того, что #header имеет line-height: 60px; а блочно-строчные элементы выровнялись по базовой линии.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@EgorWeb
Верстальщик
Картинке пропиши max-width:100%; и height:auto;
Ответ написан
Комментировать
Overfinch
@Overfinch
overflow: hodden примени к элементу, за который не должна вылазить картинка.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы