Chapter 4 . BOX Model In CSS

Parameter Details:

• content-box: Width and height of the element only includes the content area.
• padding-box: Width and height of the element includes content and padding.
• border-box: Width and height of the element includes content, padding, and border.
• initial: Sets the box model to its default state.
• inherit: Inherits the box model of the parent element.

Understanding the Box Model:

The Edges: In HTML documents, the browser creates a rectangle for each element, and the Box Model defines how padding, border, and margin are incorporated to shape this rectangle. Each side of this rectangle is referred to as an edge, defining a box.

• The innermost rectangle is the content box, determined by the rendered content of the element.
• Next is the padding box, defined by the padding property. If no padding width is specified, the padding edge matches the content edge.
• Subsequently, the border box is established by the border property. Absence of border width aligns the border edge with the padding edge.
• The outermost rectangle represents the margin box, governed by the margin property. If no margin width is specified, the margin edge aligns with the border edge.

div {
    border: 6px solid black;
    margin: 60px;
    padding: 30px;
}

This CSS configuration applies to all div elements: a border with 1px width on all sides, a margin of 10px, and padding of 80px.

When there is no content, the content region has zero height and width. The padding box defaults to the content box size plus the specified padding width on all sides. The border box aligns with the padding box dimensions plus the specified border width.

Lastly, the margin box matches the border box size plus the specified margin width. Considering two elements styled similarly, their box models dictate their relative positioning, with the content separated by a gap but the boxes touching each other. Adjusting margins alters their positioning accordingly.

BOX-Sizing

Understanding Box Model and Box Sizing:

The default box model, known as content-box, can lead to unexpected results, particularly when adding padding and border styles to an element. This default behavior causes the width or height of an element to exceed the specified values due to the addition of padding and borders.

Example:

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

In this example, the width of the textarea extends beyond 100% due to the addition of padding, showcasing the limitation of the content-box model.

Box Sizing Property:
CSS provides the box-sizing property to modify the box model for an element, offering three options:

• content-box: The default model where width and height encompass only the content, excluding padding and border.
• padding-box: Width and height include both content and padding, but not the border.
• border-box: Width and height encompass content, padding, and border.

Solution:
To resolve the textarea width issue, simply change the box-sizing property to padding-box or border-box. Among these, border-box is the most commonly used option.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Applying Box Model Globally:
To apply a specific box model to all elements on a page, utilize the following CSS snippet:

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

This code ensures that the border-box model applies universally. The asterisk (*) notation selects all elements, allowing easy override of this property on individual elements if necessary.