Understanding the box model and dev tools

Understanding the box model and what properties can change the appearance of an HTML element can enable you to style HTML elements with CSS quickly and easily without having to attempt trial-and-error changes.

Each HTML element behaves like a box that has the following properties:

• content width
• content height
• padding (top, bottom, left, right)
• border (top, bottom, left, right)
• margin (top, bottom, left, right)

These properties can be changed using CSS. Changing any one of those properties affects how the box appears on the page, and how that element interacts with the other elements around it.

The box model is not the only thing that can change the look of an HTML element. Every element also has a display property that defines how it stacks with the other elements, e.g., horizontally, vertically, hidden, etc. that can affect its appearance.

Example Demonstration of Box Model :

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Result:

Width & Height :

Every element has a default width and height. That width and height may be 0 pixels, but browsers, by default, will render every element with size. Depending on how an element is displayed, the default width and height may be adequate. If an element is key to the layout of a page, it may require specified width and height property values. In this case, the property values for non-inline elements may be specified.

Width

The default width of an element depends on its display value. Block-level elements have a default width of 100%, consuming the entire horizontal space available. Inline and inline-block elements expand and contract horizontally to accommodate their content. Inline-level elements cannot have a fixed size, thus the width and height properties are only relevant to non-inline elements. To set a specific width for a non-inline element, use the width property:

div {
  width: 400px;
}

Height

The default height of an element is determined by its content. An element will expand and contract vertically as necessary to accommodate its content. To set a specific height for a non-inline element, use the height property:

div {
  height: 100px;
}

Margin & Padding :

Depending on the element, browsers may apply default margins and padding to an element to help with legibility and clarity. We will generally see this with text-based elements. The default margins and padding for these elements may differ from browser to browser and element to element.

Margin

The margin property allows us to set the amount of space that surrounds an element. Margins for an element fall outside of any border and are completely transparent in color. Margins can be used to help position elements in a particular place on a page.

div {
  margin: 20px;
}

Padding

The padding property is very similar to the margin property; however, it falls inside of an element’s border, should an element have a border. The padding property is used to provide spacing directly within an element.

div {
  padding: 20px;
}

Borders :

Borders fall between the padding and margin, providing an outline around an element. The border property requires three values: width, style, and color. Shorthand values for the border property are stated in that order—width, style, color. In longhand, these three values can be broken up into the border-width, border-style, and border-color properties.

Here is the code for a 6-pixel-wide, solid, gray border that wraps around all four sides of a <div>:

div {
  border: 6px solid #949599;
}

Developer Tools :

Most browsers have what are known as Developer Tools. These tools allow us to inspect an element on a page, see where that element lives within the HTML document, and see what CSS properties and values are being applied to it. Most of these tools also include a box model diagram to show the computed size of an element.

To see the Developer Tools in Google Chrome, click “View” within the menu bar and navigate to “Developer” and then “Developer Tools.” This loads a drawer at the bottom of the browser window that provides a handful of tools for inspecting our code.

Clicking the magnifying glass at the bottom of this drawer enables us to hover over and then click on different elements on the page to review more information about them.

After selecting an element, we’ll see a handful of tabs on the right-hand side of the Elements panel within our Developer Tools. Selecting the “Computed” tab will show us a breakdown of the box model for our selected element.

Play around with the Developer Tools, be it in Google Chrome, Mozilla Firefox, Apple Safari, or other browsers; there is much to learn from looking at our code. I generally leave the Developer Tools open at all times when writing HTML and CSS.