HTML and CSS Reference
In-Depth Information
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.
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 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.
Search WWH ::
Custom Search