To make it easy for you to design with the box model in mind, Dreamweaver provides the CSS Layout
Box Model visual aid. When enabled, any selected
tag or otherwise affected block element,
depicts all the contributing elements: content area (the width), padding, borders, and margins. Both the
padding and margins are shown with colored diagonal lines, although in opposing directions, as shown
in Figure 11-5.
FIGURE 11-5
The CSS Layout Box Model visual aid reveals the unseen reserved space around layout elements.
365
Working with Divs and AP Elements 11
Dreamweaver not only reveals how the layout element is constructed visually, you??™ll also receive a wealth of
information from tooltips that appear as you move your cursor around the element. The information in the
tooltip varies according to cursor??™s position:
n Hover over the content area to see all the CSS properties, including those related to the box
model.
n Move your cursor over the padding or margin areas to see their respective values; for example,
Margin: 10px.
Pages:
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733