Книги лежат друг на друге или тесно прижаты друг к другу, что плохо для них, особенно в данном примере, т. к. это коллекционные книги.
Поэтому добавим отступы (padding) между статьями и блоком со свойством padding, обеспечивающим дополнительное воздушное пространство и защиту. Чем больше вы зададите отступы, тем меньше книг поместится в коробку (блок). В пример, добавлен некоторый отступ:
div {
border: thin solid #000000; height: 150px; width: 150px; padding: lOpx;
}
Вам понадобится еще одна коробка для хранения книг, которые не поместились в первую. Создайте рядом с первым еще один блок и введите в него оставшиеся книги. Поместите новый блок под первым блоком, как показано на рис. 2.23:
<div>
<li>Moby Dick</li>
<li>The red Badge of Courage</li>
<li>The Catcher in the Rye</li>
</div> <div>
<li>The Red Queen</li> <li>Awakening</li>
<li>The Scarlet Letter</li> </div>
Но вы хотите раздвинуть блоки (коробки), чтобы они не лежали один на другом. Для этого измените расстояние между блоками с помощью свойства margin:
div {
border: thin solid #000000; height: 150px; width: 150px; padding: lOpx; margin: 25px;
}
Для того чтобы лучше выделить оба блока, измените свойство border. Как поле или отступ, рамка может быть настолько толстой или тонкой, насколько захотите:
div {
border: 5рх double #000000; height: 150рх; width: 150рх; padding: lOpx; margin: 25px;
}
К этому моменту блочная модель обоих элементов изменена единообразно. Вы отрегулировали величину полей, отступов и толщину рамок со всех сторон. Но можно также изменять конкретные края блочной модели.
Например, если нужно откорректировать правую сторону элемента div, оставив настройку для других сторон без изменения:
div {
border: 5px double #000000; height: 150px; width: 150px; padding: lOpx; margin: Opx;
border-right: lpx solid #000000; padding-right: lpx; margin-right: lpx;
}
Вы с таким же успехом можете изменить другие края. Например, при использовании свойства margin код может выглядеть следующим образом:
div { margin-top: lpx; margin-right: lpx; margin-bottom: lpx; margin-left: lpx;
}
Корректируя параметры сторон и различные свойства блочной модели, разработчики могут улучшить формат отображения своих Web-страниц.



Страница: 1 | 2


Правельные рецепты CSS