HTML 5 - 4.3 : How to add margins and borders ?

The CSS box model is fundamental to web layout, comprising content, padding, borders, and margins. Padding creates space between content and the element's border, while margins create space outside the border. Understanding the box model allows developers to control element spacing precisely.

Margins and padding can be specified using multiple formats. A single value (margin: 20px) applies equal spacing on all sides. Two values create different spacing for top/bottom and left/right: margin: 10px 40px sets 10px vertically and 40px horizontally. Four values follow clockwise order: margin: 0px 50px 10px 50px specifies top, right, bottom, and left individually. Developers can also use direction-specific properties like margin-bottom or padding-left for targeted adjustments.

Borders combine three properties: thickness (pixels), style (solid, dashed, or dotted), and color. The border shorthand syntax is border: 1px solid blue. Padding typically uses pixels but accepts other units. Setting margin: 0 on the body element removes default browser margins and padding, providing a clean canvas for custom layouts.

Practical border usage includes creating visual separation between items using properties like border-left: 4px solid green. Padding inside elements separates content from borders, while margins between elements create breathing room. Combining margins, padding, and borders with footer styling demonstrates how to transform basic layouts into visually organized, professional-looking designs.

Summary

This lesson covers the CSS box model and how to add margins and borders to HTML elements. You'll learn how to apply margins using single, double, four-value syntax, or specific sides (like margin-right), and style borders with thickness, design patterns (solid/dashed/dotted), and colors. The lesson includes practical examples demonstrating the difference between padding and margin, managing the body element's default margins, and styling components like footers.

Key points

  • The box model has four components: content, padding (space inside borders), border itself, and margin (space outside borders)
  • Margins can be applied as one value (all sides), two values (top/bottom and left/right), four values (clockwise from top), or specific sides using properties like margin-right or margin-left
  • Borders require three CSS values: thickness in pixels, style (solid/dashed/dotted), and color—example: border: 1px solid blue;
  • The body element has default margins that must be set to zero with body { margin: 0; } to remove outer whitespace
  • When multiple margin or padding properties are declared, only the last value is applied—previous declarations are overridden
  • Padding-left and margin-bottom are examples of side-specific properties used to add space between elements or inside borders

FAQ

What is the difference between padding and margin?

Padding is the space between your content and its border (inner spacing), while margin is the space outside the border (outer spacing). Padding affects how much room is between the element's edges and its contents; margin affects how much space is between the element and other elements around it.

How do I create a border with different styles like dashed or dotted?

Use the border property with the style value: border: 1px dashed blue; or border: 1px dotted blue;. The middle value determines the style—solid creates a continuous line, dashed creates small lines, and dotted creates small points.

Why do I still have white space around my header even after setting its margin to zero?

The body element has default margins that are separate from your header. You must explicitly set body { margin: 0; } in your CSS to remove the body's outer whitespace, since the body element wraps all content on the page.