The box model — the idea the whole language rests on

CSS lays every element out as four concentric layers, and the box you see is width + padding + border.

• content (width × height) sits at the centre
• padding is space inside the border; border is the edge; margin is the gap outside it
• A 200px box with 20px padding and a 2px border is really 244px wide
• box-sizing: border-box makes width include the padding and border — set it everywhere
• min/max-width bound the size; overflow: hidden clips, overflow: scroll adds a scrollbar

Borders, padding, and margins in practice

A border has three sub-properties, and padding and margin take one value per side or a clockwise shorthand.

• border-style, border-width, border-color — or the border shorthand: 5px solid red
• border-radius rounds the corners
• Shorthand runs clockwise from the top: padding: 25px 50px 75px 100px is top, right, bottom, left
• visibility: hidden hides the box but keeps its space
• display: none removes the box and its space entirely

Lists and tables

List markers and table borders reuse tools you know, plus a few of their own.

• list-style-type (disc, square, decimal, upper-roman…), list-style-image, list-style-position
• The list-style shorthand sets all three at once
• border-collapse: collapse merges doubled borders into single lines
• border-spacing sets the gap when borders stay separate
• empty-cells: hide suppresses borders around blank cells
• tr:hover { background-color: … } highlights the row under the cursor

Forms and images

Form controls are just boxes, and images can be sized and floated.

• Inputs take font-size, background-color, border, border-radius, and :hover
• Add box-sizing: border-box so a width: 100% input doesn't overflow
• cursor changes the pointer — pointer, text, move, wait, help
• Size images with width/height; float: left/right lets text wrap around them
• background-image + background-repeat tile a picture; the background shorthand collapses colour, image, and repeat