CSS Макет - width та max-width
Використання width, max-width та margin: auto;
Як згадувалось в попередньому розділі, блочний елемент завжди займає всю доступну ширину (розтягується вліво та вправо, наскільки це можливо).
Встановлення властивості width блочного елемента запобіжить його витягуванню до країв контейнеру. Потім ви можете встановити поля автоматично, щоб горизонтально центрувати елемент всередині контейнера. Елемент займе вказану ширину, а простір, що залишиться, буде розділено порівну між двома полями:
Примітка: Проблема з <div> вище відбувається, коли вікно браузера меньше ширини елемента. Потім браузер додає на сторінку горизонтальну смугу прокрутки.
Використання замість цього max-width покращить роботу браузера з невеликими вікнами. Це важливо при створенні сайту, придатного для використання на невеликих пристроях (тобто, для адаптивності):
Порада: Змініть розмір вікна браузера до ширини меньше 500 пікселів, щоб побачити різницю між двома div-ами!
Ось приклад двох div-ів вище:
Приклад
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
Спробуйте самі »
