Ajax-loader-large-white
CSS Positioning
Эскиз проекта

Теперь, когда вы поболее понимаете о свойствах отображения и ящиковой модели, мы можем углубиться в детали создания индивидуальности для блоков.

Посмотрите на диаграмму во вкладке результата (это первый пример из этого урока). Как вы видите, каждый ящик сделан слоями. От внешнего к внутреннему.

Поле это пространство вокруг элемента. Чем больше поле, тем больше пространства между элементом и другими элементами его окружающими. Мы можем регулировать поле, чтобы переместить элементы ближе или дальше друг к другу.

Граница это край элемента. It's what we've been making visible every time we set the border property.

Отступ это пространство между содержанием и границей. Мы можем отрегулировать его значение с помощью CSS, чтобы переместить границу ближе или дальше от содержания.

Содержание это текущий "материал" в ящике. If we're talking about a

element, the "stuff" is the text of the paragraph.

Вы увидите такие аббревиатуры как TM, TB, и TP в этой диаграмме. Это означает "top margin," "top border," и "top padding." Как увидим, мы можем отрегулировать верх, низ, правую и левую сторону отступа, границы или поля отдельно.

Instructions

Изучите диаграмму во вкладке результата, перед тем как начнёте изучать отступы, границы и поля. Then hit Save & Submit Code to start adjusting these properties!

index.html
stylesheet.css
project
View Preview