6.1 CSS Box Model & Layout Basics

1. The CSS Box Model

CSS Box Model

• The CSS box model is the fundamental concept for understanding how elements are structured and displayed on the page. Every element is essentially a rectangular box consisting of four areas:

  1. Content: The innermost part where the text or media is displayed.

  2. Padding: The space between the content and the border. It increases the distance between the content and the border without affecting the border.

  3. Border: A line surrounding the padding and content. It can be styled with various properties like solid, dotted, or dashed.

  4. Margin: The outermost space between the element’s border and adjacent elements. Margins create spacing between elements.

• Impact on Layout: Understanding how these parts work together allows precise control over spacing and element layout on the page.

1. CSS Margins & Padding

• Difference Between Margins and Padding:

  • Margins control the space outside an element’s border, pushing other elements away.

  • Padding controls the space inside an element’s border, increasing the space between the content and its border.

• Individual Side Control: You can adjust the margin or padding on each side of an element:

  margin-top: 10px;
  padding-left: 15px;

• Shortcut Notation: You can also define margins or padding for all sides using a shorthand notation:

  margin: 10px 15px 20px 25px; /* Top, Right, Bottom, Left */
  padding: 5px 10px; /* Top/Bottom, Left/Right */

1. Borders & Outlines

• Adding Borders: You can define borders for elements using properties like border-width, border-style, and border-color.

  border: 2px solid black; /* width, style, color */

• Border Styles: CSS offers several border styles:

  • solid

  • dashed

  • dotted

  • double

• Outlines: Similar to borders but don’t affect the layout. Outlines can be used for accessibility or focus states:

  outline: 2px dashed blue;

1. Width, Height, and Overflow

• Setting Width and Height: Use the width and height properties to control the size of an element. These dimensions affect the content box, excluding padding, border, and margin.

  width: 300px;
  height: 200px;

• Overflow Property: Determines what happens if content overflows the set dimensions of an element.

  • overflow: visible; (default) – Content spills out of the box.

  • overflow: hidden; – Content is clipped and not visible.

  • overflow: scroll; – Scrollbars are added to view the content.

  • overflow: auto; – Adds scrollbars only when necessary.