The box model

Every element is a rectangular box made of concentric layers: content, padding, border, and margin.

Understanding these four layers is fundamental to CSS design. When you set padding on a button, add a border to a card, or space elements apart with margin, you're working with the box model.

The four layers, from inside out:

1. Content — text, images, child elements. Sized by Width and Height.
2. Padding — transparent space inside the element, between content and border. Set by Padding.
3. Border — a line around the padding. Set by Border properties.
4. Margin — transparent space outside the border, separating this element from neighbors. Set by Margin.

Think of it like a framed painting: the painting is content, the mat is padding, the frame is the border, and the space to the next painting is margin.

Width and height

Width and Height control the size of the content area (not including padding, border, or margin).

To set width or height:

1. Select an element
2. In the Style Manager, open the Dimension section
3. Enter a value in the Width or Height field

Common width/height values

Absolute sizes: - 300px — exactly 300 pixels - 50% — half the parent's width/height - 100vh — 100% of the viewport height (full screen)

Responsive keywords: - auto — the browser calculates it based on content and context (default) - max-content — as wide/tall as the content needs, with no wrapping - min-content — as narrow/short as possible while fitting content - fit-content — fits available space but never exceeds max-content

Inheritance: - inherit — take the parent's width/height - initial — use the browser default - unset — remove any value you set

Available units

You can use these units with any numeric value:

Unit	Meaning
px	Pixels (fixed size)
%	Percentage of parent's width/height
em	Relative to the element's font size (1em = 1x font size)
rem	Relative to the root font size (usually 16px)
vh	Viewport height (1vh = 1% of screen height)
vw	Viewport width (1vw = 1% of screen width)
dvh	Dynamic viewport height (accounts for address bar)
dvw	Dynamic viewport width
cqi	Container query inline size (responsive to parent container)
cqb	Container query block size
cqw	Container query width
cqh	Container query height
cqmin	Container query minimum
cqmax	Container query maximum

Most common: px, %, em, rem, vh. Container query units (cq*) are for advanced responsive layouts.

Min and max constraints

Below Width and Height in the Dimension section, you'll find four constraint fields:

• Min-Width — the element cannot shrink narrower than this
• Max-Width — the element cannot grow wider than this
• Min-Height — the element cannot shrink shorter than this
• Max-Height — the element cannot grow taller than this

These accept the same units and keywords as Width/Height.

Example: set Width to 100% and Max-Width to 800px. The container fills the screen on small devices but never exceeds 800px on larger screens — the perfect responsive container.

Padding

Padding is transparent space inside the element, between the content and the border. Padding inherits the element's background color.

To set padding:

1. Select an element
2. Open the Dimension section of the Style Manager
3. Find the Padding composite field
4. Expand it to see sub-fields:
5. Padding-top — space above content
6. Padding-right — space to the right of content
7. Padding-bottom — space below content
8. Padding-left — space to the left of content

Each padding field accepts the same units as width/height (px, %, em, rem, etc.). Setting Padding-top to 20px adds 20 pixels of space at the top.

Common padding values: 10px, 15px, 20px, 24px, 32px. These are good baseline spacings for buttons, cards, and containers.

Shorthand: If all four sides are the same, you can set the main Padding field to a single value (e.g., 20px sets all four sides to 20px).

Why padding, not margin? Padding includes the element's background. If you set a background color or border-radius, padding respects it. Margin doesn't — it's always transparent and sits outside the background.

Border

Border is a visible (or invisible) line around the padding.

Each border has three properties:

• Width — thickness of the line (e.g., 2px, 4px)
• Style — appearance of the line
• Color — color of the line

To set a border:

1. Select an element
2. Open the Decorations section of the Style Manager
3. Find Border radius (this is the rounded corners, not the border itself)

Note: As of now, there's no dedicated Border composite field in the UI. You can set borders via Border radius for rounded corners, or use CSS Variable or custom CSS for more border control.

Border radius

Border-radius creates rounded corners.

To set border radius:

1. Open the Decorations section of the Style Manager
2. Find Border radius
3. Set individual corner radii:
4. Top left, Top right, Bottom right, Bottom left

Each accepts units: px, %, em, rem, etc. 10px rounds the corner by 10 pixels. To round all corners equally, set all four to the same value.

Margin

Margin is transparent space outside the border, separating this element from its neighbors.

To set margin:

1. Select an element
2. Open the Dimension section of the Style Manager
3. Find the Margin composite field
4. Expand it to see sub-fields:
5. Margin-top — space above the element
6. Margin-right — space to the right
7. Margin-bottom — space below
8. Margin-left — space to the left

Each accepts the same units as padding. You can also set auto on the left and right to center an element: set Margin-left to auto and Margin-right to auto (but only if the element has a fixed width and its parent is not a flex container).

Common margin values: 10px, 15px, 20px, 24px, 32px.

Margin vs padding: - Padding is inside the element's background and border - Margin is outside, transparent space between elements - Use padding to space content away from the element's edge - Use margin to space this element away from its neighbors

Margin collapsing: two adjacent vertical margins can collapse into one. For example, if element A has margin-bottom 20px and element B has margin-top 20px, they don't add up to 40px — they collapse to 20px. This is normal CSS behavior. To avoid confusion, use gaps instead when laying out flex containers (see Flexbox).

Box sizing

Box-sizing determines whether padding and border are included in the element's width/height or not.

Two values:

• content-box (default) — Width/Height control only the content area. Padding and border are added on top. So if Width is 100px and Padding is 10px, the total width is 120px.
• border-box — Width/Height control the full box (content + padding + border). So if Width is 100px and Padding is 10px, the content area shrinks to 80px to keep the total at 100px.

Most designers prefer border-box because it's more predictable. You can set this globally via CSS or per-element via the Style Manager.

Overflow

When content is too large for its container, Overflow controls what happens.

In the Dimension section, find Overflow:

• Overflow X — horizontal overflow behavior
• Overflow Y — vertical overflow behavior

Options:

Value	Behavior
visible	Content overflows outside the container (default)
hidden	Content is clipped; overflow is hidden
scroll	Add scrollbars (even if not needed)
auto	Add scrollbars only when content overflows

Example: set Overflow to auto on a tall card. If content fits, no scrollbar appears. If content overflows, a scrollbar appears so users can scroll inside the card.

Practical example: centered card with padding and margin

You're building a card with rounded corners, internal spacing, and gap from neighbors.

1. Add a Container, set tag to article
2. Set size:
3. Width: 400px

4. Max-width: 100% (so it shrinks on small screens)

5. Set internal spacing:

6. Padding: 24px (all sides)

7. This creates 24px of space between the card's content and edges

8. Set external spacing:

9. Margin: 16px (all sides)

10. This creates 16px of gap between this card and other elements

11. Add rounded corners:

12. Border radius: all corners to 8px

13. Optional background:

14. Background color: a light gray
15. The padding will be inside this background

The card now has internal breathing room (padding), external separation from neighbors (margin), and a professional appearance with rounded corners.

Common mistakes

• Confusing padding and margin. Padding is inside (respects background/border), margin is outside (always transparent).
• Using margin when you meant padding. If you want space inside a button, use padding, not margin. Margin won't affect how the button looks internally.
• Setting width to 100% on a padded element. If Width is 100% and Padding is 20px, the total is wider than the parent (unless you set Box-sizing to border-box). Use Max-width instead of Width for flexible containers.
• Forgetting to set a width before using auto margins. Margin: auto centers an element only if it has a fixed width and isn't in a flex container.
• Applying negative margin. While possible, negative margins are confusing and usually a sign you should restructure your layout. Avoid them.

Learn more

• MDN: The CSS box model — detailed reference
• MDN: margin — margin behavior and collapsing
• MDN: padding — padding reference
• MDN: border-radius — rounded corners reference
• Flexbox gaps — modern spacing in layouts
• Responsive design — using relative units for responsive sizes

---

Advanced: box-sizing in Silex

By default in CSS, content-box sizing makes Width and Height control only the content area — padding and border are added on top. This makes the total visible size larger than the Width you set.

Silex uses border-box sizing globally, where Width and Height include padding and border. If you set an element to 300px wide with 20px padding and 2px border, the total visible width stays 300px — the content area shrinks to accommodate. This is why adding padding doesn't make elements wider in Silex.

You rarely think about this, but it explains the behavior you see on the canvas.

Reference: all units and properties

Unit	Meaning
px	Pixels (absolute, fixed size)
%	Percentage of parent's width/height
em	Relative to element's font size
rem	Relative to root font size
vh	1% of viewport height
vw	1% of viewport width
dvh	1% dynamic viewport height (mobile-aware)
dvw	1% dynamic viewport width
cqi, cqb, cqw, cqh, cqmin, cqmax	Container query units (advanced responsive)

All box model properties available

Property	Purpose	Units
Width, Height	Content size	px, %, em, rem, vh, vw, cq*, auto, max-content, min-content, fit-content
Min-Width, Max-Width, Min-Height, Max-Height	Size constraints	same as Width/Height
Padding-Top, Padding-Right, Padding-Bottom, Padding-Left	Internal spacing	px, %, em, rem, vh, vw, cq*, auto, inherit, initial, unset
Margin-Top, Margin-Right, Margin-Bottom, Margin-Left	External spacing	px, %, em, rem, vh, vw, cq*, auto, inherit, initial, unset
Border-Top-Left-Radius, Border-Top-Right-Radius, Border-Bottom-Right-Radius, Border-Bottom-Left-Radius	Corner rounding	px, %, em, rem, vh, vw, cq*, auto, inherit, initial, unset
Overflow-X, Overflow-Y	Content overflow handling	visible, hidden, scroll, auto, inherit, initial, unset

---

Quiz

Q1: You set Width to 400px and Padding to 20px all around. How wide is the element on screen?

• A) 440px (padding adds to width)
• B) 400px (Silex uses border-box sizing)
• C) 360px (padding subtracts from width)

Answer

B) 400px — Silex uses border-box sizing. Width includes padding, so the content area shrinks to 360px to keep the total at 400px.

Q2: Two paragraphs are stacked. First has Margin-Bottom 24px, second has Margin-Top 16px. How much space between them?

• A) 40px (margins add up)
• B) 24px (larger margin wins)
• C) 16px (smaller margin wins)

Answer

B) 24px — vertical margins collapse. The browser uses the larger value, not the sum. This is normal CSS behavior.

Q3: You want a responsive container that fills the screen but never exceeds 960px and stays centered. How?

• A) Width: 100%, Max-width: 960px, Margin-left: auto, Margin-right: auto
• B) Width: 960px, Margin: auto
• C) Width: 100%, Padding: 20px on left and right

Answer

A) Width: 100%, Max-width: 960px, Margin-left: auto, Margin-right: auto — this fills the screen up to 960px and centers it.

Q4: A rounded container has a child image that sticks out past the corners. How do you clip it?

• A) Set the image's Border-radius to match the container
• B) Set the container's Overflow to hidden
• C) Add padding to the container

Answer

B) Set the container's Overflow to hidden — this clips child content to the container's shape, including rounded corners.

Q5: Padding is space inside an element. What does Margin do?

• A) Same thing as padding
• B) Space outside the element, separating it from neighbors
• C) A visual border around the element

Answer

B) Space outside the element, separating it from neighbors — padding respects background color, margin is always transparent.