Box Model in CSS

Box Model in CSS

The CSS box model describes the rectangular boxes that wrap elements. Each box consists of four areas (from outer → inner): margin, border, padding, and content.

Quick definitions

  • Margin — outer space outside the border (creates distance between elements).
  • Border — the visible line around padding/content (can be styled, dashed, thick, etc.).
  • Padding — space between border and the element's content.
  • Content — the actual text, image, or child elements inside the box.

Code example  

.box {
  width: 300px;
  height: 150px;
  margin: 20px;           /* outer space (margin) */
  border: 4px solid #cd3636; /* border */
  padding: 20px;          /* inner space (padding) */
  background: #ffffff;    /* content background */
}

Rendered demo 

Content area
Margin (visual)

Space outside the border — visible here as the gap between the red-bordered box and the pale container edge.

Border

The red line around the box (controlled by border properties).

Padding

Space between the border and content (20px in the demo).

Content

Where your text, images or child elements appear.

Tip: When calculating layout remember the default box-sizing is content-box (padding and border add to the element's total size). You can use box-sizing: border-box; (often added site-wide) so width/height include padding & border.

You can paste this entire HTML into a Moodle Lesson or Page (switch the editor to HTML/source mode). Because many Moodle filters strip <style> blocks, the demo above uses inline styles to ensure it renders correctly after pasting.