Understanding the Box Model

When you add elements on to html, it get rendered as box, CSS box model governs these boxes, their layout and spacing.

Understanding Box Model helps to create complex and flexible layouts, manage spacing, and control the rendering of elements in your web designs. The box-sizing property is particularly useful for simplifying box size calculations, and the display property is key for controlling element behavior in the document flow. Let’s take a look at these.

Box Model

The box model consists of the following components

Content

The actual content of the box, such as text, images, or other elements. The size of the content box is defined by the width and height properties.

Padding

The space between the content and the border. Padding is inside the element and increases the size of the box. You can specify padding for each side (top, right, bottom, left) using properties like padding-top, padding-right, padding-bottom, and padding-left.

div {
  padding: 10px; /* Adds 10px padding on all sides */
  padding: 10px 20px; /* Adds 10px padding on top and bottom, 20px on left and right */
}

Border

The border surrounds the padding and content. Borders can have different styles, widths, and colors, which can be controlled by respective properties. You can specify borders for each side using properties like border-top, border-right, border-bottom, and border-left.

div {
  border: 1px solid black; /* Adds a 1px solid black border on all sides */
}

Margin

The space outside the border. Margins create space between elements. You can specify margins for each side using properties like margin-top, margin-right, margin-bottom, and margin-left.

div {
  margin: 10px; /* Adds 10px margin on all sides */
  margin: 10px 20px; /* Adds 10px margin on top and bottom, 20px on left and right */
}

Box-sizing Property

Different box sizing properties are used to control the width and height of the boxes.

content-box

The default value. The width and height properties apply only to the content box. Padding and border are added outside the content box, increasing the total size.

Example of how width property behaves when box-sizing is content-box (default), here The total width is 200px + 10px (padding) + 10px (padding) + 5px (border) + 5px (border) = 230px. This makes element size a bit unpredictable, making the element grow in size, forcing you to calculate the size every time in your mind to perfect the size of element.

div {
  width: 200px;
  padding: 10px;
  border: 5px solid;
  box-sizing: content-box; /* Default */
}

border-box

The width and height properties include padding and border. This setting simplifies layout by preventing the box size from growing when padding or border is added. Here he total width remains 200px.

div {
  width: 200px;
  padding: 10px;
  border: 5px solid;
  box-sizing: border-box;
}

Display Property

The display property specifies the display behavior of an element, affecting how it is rendered in the document flow.

block

The element generates a block-level box. Meaning it starts on a new line, takes up the full width available, and you can add top and bottom - margins and padding. Elements <div>, <p>, <h1> already have block level display property by default, thats why if you add these elements it gets rendered in new lines.

div {
  display: block;
}

inline

The element generates an inline-level box. It does not start on a new line and only takes up as much width as necessary on the same line where it gets added. It respects left and right margins and padding, but not top and bottom. Elements <span>, <a>, <strong> already have display property value as inline, these elements gets rendered in the same line.

span {
  display: inline;
}

inline-block

The element generates an inline-level box but behaves like a block element. It does not start on a new line but respects all margins, padding, and width/height properties.

img {
  display: inline-block;
}

none

If you dont want the element to not show up on the webpage or take up any space in the document flow, use display none. Commonly used to hide elements that needs to be hidden from the page.

.hidden {
  display: none;
}