Box-Sizing Property

Controls how element dimensions are calculated:

A. content-box –> The default one.

• width/height = content only
• Padding/border add to total size

div {
  box-sizing: content-box; /* Default */
  width: 100px;
  padding: 20px; /* Total width = 140px */
}

B. border-box – Recommended.

• width/height includes padding+border
• More predictable sizing

* {
  box-sizing: border-box; /* Apply to all elements */
}
div {
  width: 100px;
  padding: 20px; /* Total width stays 100px */

3. Centering Elements

A. Horizontal Centering

1. For block element

.container {
  width: 80%;
  margin: 0 auto; /* Equal left/right margins */
}

2. For inline/inline-block elements:

.parent {
  text-align: center; /* Centers child inline elements */
}

B. Vertical + Horizontal Centering

A more modern method used is the use of flex box as shown below.

.parent {
  display: flex;
  justify-content: center; /* Horizontal */
  align-items: center; /* Vertical */
  height: 300px; /* Must have height */
}