Box Model

Learn how to size and position elements, set margins, paddings and borders, and use different types of elements and their features. This is the first and most important step to creating pages with sophisticated layouts and complex decorative elements.

TaskState
Block-level Elementsnot completedStart
Inline Elementsnot completedStart
Width and Heightnot completedStart
padding Propertynot completedStart
margin Propertynot completedStart
Bordersnot completedStart
Standard Box Modelnot completedStart
Challenge 1not completedStart
Margin Collapsenot completedStart
Margin Overflownot completedStart
How to Center Element?not completedStart
Box Model and Inline Elementsnot completedStart
Width of 100% and Default Widthnot completedStart
Problems of The Conventional Box Modelnot completedStart
Modifying Box Model: box-sizing Propertynot completedStart
Challenge 2not completedStart
Manage Element Type: display Propertynot completedStart
display: inline-blocknot completedStart
display: tablenot completedStart
display: table-rownot completedStart
display: table-cellnot completedStart
display: nonenot completedStart
Last Challengenot completedStart