Understanding the CSS Box Model - Beginning CSS3 - page 120

Figure 6-24. Controlling vertical overflow with text works as expected
Notice that only a vertical scrollbar is generated by setting overflow-y to scroll .
When scrollbars are generated by the overflow properties, they're drawn inside the containing box.
However, WebKit-based browsers on Mac OS X 10.7 (Lion), iOS 5, and Android don't draw any scrollbars.
Figure 6-25 shows overflow-x.html in Chrome on a Mac. A narrow scrollbar indicator appears when you mouse
over a scrollable element, but the content fills the box. On iOS 5 and Android, the content can be scrolled, but no
indicator appears.
Figure 6-25. No scrollbars are displayed in Chrome and Safari on Mac OS X
All browsers provide a scrolling mechanism when needed, but the lack of scrollbars in some browsers means
you need to test your design carefully when using overflow properties.
Summary
The CSS box model lies at the heart of page layout, making this arguably the most important chapter in this
book. In the standard box model, width- and height-related properties apply only to the content of an element.
Padding, borders, and margins are added outside the content. Setting the CSS3 box-sizing property to
border-box allows you to change this behavior by including padding and borders inside an element's
dimensions. However, the box-sizing property isn't universally supported, so it should be used with caution.
Whichever box model you choose, padding adds horizontal and vertical space around the content of an
HTML element, but inside any border. Padding uses the same background as the content and never collapses.