The CSS box model is fundamental to understanding how elements are sized and spaced in web design. Every element is treated as a rectangular box with content, padding, border, and margin layers.

1. Padding (Itnernal Spacing)

When you define both dimensions and padding, the padding adds to the total box size. However, if width or height is inherited from parent elements, padding does not expand the box.

2. Margin (External Spacing)

Margins create space between adjacent boxes. Like padding, margins support shorthand notation for multiple sides.

Centering Block-Level Elements:

To horizontally center a block element, two conditions must be met: the element must have an expilcit width, and both left and right margins must be set to auto.

.centered-box {
    width: 298px;
    margin: 100px auto;
}

For inline or inline-block elements, centering is achieved by applying text-align: center to the parent container.

Margin Collapsing

When nested block elements both have top margins, the parent element collapses to the larger margin value. Several solutions exist:

• Add a top border to the parent: border-top: 1px solid transparent;
• Add top padding to the parent: padding-top: 1px;
• Apply overflow handling to the parent: overflow: hidden;

Floated, fixed, or absolutely positioned elements do not experience margin collapse issues.

Reset Default Styles

* {
    padding: 0;
    margin: 0;
}

For inline elements, only horizontal margins work reliably across browsers. Convert to block or inline-block for full margin support.

---

Visual Effects

Border Radius

The border-radius property creates rounded corners. Larger values produce more pronounced rounding.

.rounded-container {
    border-radius: 8px;
}

Box Shadow

The box-shadow property syntax: box-shadow: horizontal vertical blur spread color inset;

.card {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

The horizontal and vertical offsets are required. By default, shadows are external and cannot include the "outset" keyword. Shadows do not occupy document space and do not affect element positioning.

Text Shadow

.headline {
    text-shadow: 2px 2px 4px #888;
}

---

CSS Float Layout

Floating is commonly used to place multiple block elements in a single row.

Layout Rule: Use normal flow for vertical stacking. Use float for horizontal arrangements.

Float Property Values

• none - default behavior
• left - element floats left
• right - element floats right

Floating moves elements to the specified side until their edge touches the containing block or another floated element.

Float Behavior

• Inline elements with float gain support for width and height without needing display conversion
• Floated elements (inline, block, or otherwise) display characteristics of inline-block elements with controllable dimensions
• Multiple floated elements align horizontally regardless of their original display type
• Floated elements without explicit width adapt to their content size

Float Layout Principles

1. Arrange parent elements vertically using normal flow, then use float for horizontal positioning of children
2. When elements should align horizontally, all siblings should have float applied unless specific positioning is needed

Floated Elements and Document Flow

Floated elements only affect subsequent normal flow elements, not preceding ones. A floated element rises and floats above the normal flow content that follows it, since floated elements do not occupy document space.

Example scenarios with three divs:

<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>

If items 1 and 3 are floated but item 2 remains in normal flow, item 1 appears above item 2, and item 3 occupies a new row above item 2.

---

Clearing Floats

Parent containers often cannot have fixed heights when children are floated, causing the parent to collapse to zero height. This disrupts subsequent elements in normal flow.

Method 1: Clear Element

.clear {
    clear: both;
}

Add a block-level element with clear: both after floated content. This approach adds extra markup.

Method 2: Overflow Property

.parent {
    overflow: hidden;
}

Simple but may hide overflowing content.

Method 3: Single Pseudo-element

.wrapper:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.wrapper {
    *zoom: 1;
}

The * prefix targets IE6-7 only.

Method 4: Dual Pseudo-elements (Recommended)

.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {
    clear: both;
}
.container {
    *zoom: 1;
}

<div class="container">
    <div class="primary">Primary</div>
    <div class="secondary">Secondary</div>
</div>
<div class="footer">Footer</div>

This approach handles edge cases in older browsers effectively.