What is the Box Model?

Every HTML element is represented as a rectangular box model, which consists of four areas.

• Content: The innermost part where the text or images appear.
• Padding: Space between the content and the border.
• Border: The edge surrounding the padding (and content).
• Margin: Space outside the border, separating the element from others.

Visual Representation of the Box Model

Explanation

• The width is 200px, but the total size of the box includes padding, border, and margin.
  • Total width: 200px (width) + 20px (padding) + 5px (border) = 230px.Total width: 200px (width) + 20px (padding) + 5px (border) = 230px.
  • The element will also have an additional 10px of margin outside of it.

Understanding Padding and Margin

Padding

• Padding adds space inside the element, between the content and the border.
• You can control padding for each side individually or set the same padding for all sides.

Explanation

• padding: 10px; applies 10px of padding to all sides.
• You can also apply padding to individual sides using padding-top, padding-right, padding-bottom, and padding-left.

Margins

• Margins create space outside the element, pushing it away from other elements.
• Similar to padding, you can control margins for each side individually or set the same margin for all sides.

Explanation

• margin: 15px; applies a 15px margin around the element.
• Individual sides can be adjusted using margin-top, margin-right, etc.

Borders and Border Radius

• Borders are applied around the padding and content. You can control the width, style, and color of borders.
• Border styles include:
  • solid: Asolid line.
  • dashed: Adashed line.
  • dotted: Adotted line.

Explanation

• Borders add a visual edge around an element. You can control how thick and what style the border is.

Border Radius

• The border-radius property makes the corners of an element rounded.
• You can apply different values to create more rounded or less rounded corners.

Explanation

• A border-radius of 10px creates rounded corners. If you set the radius to 50%, it will create a circular shape.

Box Sizing and Width/Height

Width and Height

• The width and height properties define the size of an element’s content area, excluding padding, border, and margin.
• You can set width and height using pixels (px), percentages (%), or other units.

Explanation

• In this example, the content area of the will be 300px wide and 200px high, but the total size will include padding, borders, and margins.

Box Sizing

• By default, the width and height only apply to the content area. However, you can change this behavior using box-sizing: border-box;.
• With border-box, padding and borders are included in the element’s total width and height.

Explanation

• box-sizing: border-box; makes sure the total width is 300px, including padding and border, rather than adding padding and border to the width.

Tutorial completed