| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Додати на сторінку кілька зображень, щоб вони розташовувалися поруч один з одним по вертикалі без зазорів.
Рішення
Розташування зображень друг під іншому часто продиктовано вимогами дизайну, коли необхідно «склеїти» без швів кілька зображень в одну цілісну картину. Зазвичай для перенесення тексту, а також зображень на інший рядок застосовується тег <br> або контейнер фіксованого розміру, але в тому й іншому випадку є свої особливості.
Для початку розглянемо спосіб застосування тега <br>, який відповідає за створення переносу. Цей тег досить додати відразу ж після першого тега <img>, як показано в прикладі 1. Тут, однак, криється одна хитрість. При суворому режимі браузера (в HTML5 або при строгому <!DOCTYPE> в HTML4 або XHTML) між зображень виникає порожній проміжок, який допоможе прибрати властивість line-height, його слід вказати для контейнера, у якому зберігаються зображення, зазвичай це тег <p> або <div>.
Приклад 1. Використання тега<br>
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Зображення по вертикалі</title>
<style>
.img{
line-height: 1px; /* Міжрядкова відстань */
}
</style>
</head>
<body>
<p class="img">
<img src="images/ecctitle.png" alt="Назва" width="640" height="158">>
<br>
<img src="images/ecctitle.png" alt="Навігація" width="640" height="30">
</p>
</body>
</html>
Результат цього прикладу показано на рис. 1. Зображення розташовуються всередині контейнера <p> і поділяються тегом <br>. Для стикування зображень без пробілів в стилях вказується властивість line-height зі значенням 1px. Ті ж малюнки без стикування показано на рис. 2.
Рис. 1. Два зображення об'єднані по вертикалі
Рис. 2. Проміжок між зображеннями
Крім використання міжрядкової відстані, існують і інші методи прибрати проміжок між малюнками, наприклад, використовувати властивість vertical-align.
.img img {
vertical-align: middle;
}
Можна обійтися і без тега <br>, помістивши зображення в блок фіксованої ширини, значення якої співпадає з шириною малюнків. Перенесення зображень один під одного відбудеться автоматично (приклад 2).
Приклад 2. Фіксована ширина
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Зображення по вертикалі</title>
<style>
.center {
margin: 0 auto; /* Вирівнювання блоку по центру */
width: 640px; /* Ширина блоку */
line-height: 1px; /* Міжрядкова відстань */
}
</style>
</head>
<body>
<div class="center">
<img src="images/ecctitle.png" alt="Назва" width="640" height="158">
<img src="images/ecctitle.png" alt="Навігація" width="640" height="30">
</div>
</body>
</html>
У браузері Internet Explorer 6 і 7 у результаті виконання даного прикладу можлива поява проміжку між зображеннями. Відома помилка цього браузера вирішується просто. Досить теги <img> в коді прикладу записати в один рядок без пропусків і переносів.