HTML and CSS Reference
Picking a Box Size
Generally speaking, the best box-sizing value to use is border-box . The border-
box value makes our math much, much easier. If we want an element to be 400 pixels
wide, it is, and it will remain 400 pixels wide no matter what padding or border values we
add to it.
Additionally, we can easily mix length values. Say we want our box to be 40% wide. Ad-
ding a padding of 20 pixels and a border of 10 pixels around every side of an element
isn't difficult, and we can still guarantee that the actual widt h of our box will remain 40%
despite using pixel values elsewhere.
The only drawback to using the box-sizing property is that as part of the CSS3 specific-
ation, it isn't supported in every browser; it especially lacks support in older browsers. For-
tunately this is becoming less and less relevant as new browsers are released. Chances are
we're safe to use the box-sizing property, but should we notice any issues, it's worth
looking into which browser those issues are occurring with.
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 nav-
igate 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 pan-
el 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 Sa-
fari, 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. And I frequently in-
spect the code of other websites to see how they are built, too.