Layout Design with the Box Model

Let's explore layout design techniques using the box model 🙂

To place a block element at the center of the screen, use margin: 0 auto.

The auto value applies only to the left and right margins, not the top and bottom.

Copy
.box {
  width: 300px;
  margin: 0 auto; /* 0 top and bottom margin, auto left and right margin for horizontal centering */
}

When designing elements in a card format, utilize padding, border, and margin.

Copy
.card {
  padding: 20px; /* Internal spacing */
  border: 1px solid #ddd; /* Border */
  margin: 20px 0; /* External spacing */

  /* Shadow effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 0: horizontal, 4px: vertical, 8px: blur level, rgba: color and opacity */
}

By default, the width of a box refers only to the width of the content.

Therefore, adding padding or border increases the total width of the box.

To include padding and border in the element's dimensions without increasing the total width of the box, use the box-sizing: border-box property.

Copy
.border-box-example {
  box-sizing: border-box; /* Specifies dimensions including padding and border */
  width: 200px; /* Element width is 200px */
  height: 200px; /* Element height is 200px */
  padding: 20px;
  border: 10px solid black;
}

In this case, the total visible width of the box is 200px, with padding and border included within this dimension.

By using box-sizing: border-box, you can prevent elements from becoming larger than expected due to padding and borders.