LAYOUTS - CSS: Professional Techniques for Modern Layout - page 107

109 Figure 4-2: The third column drops out of sight.

h at's what's meant when we say that borders participate in layout. Outlines, on the other hand,
do not. h ey are ef ectively drawn around elements at er they've been laid out, so in our three-
div scenario, the div s will all sit next to each other with the outlines drawn around them.

It doesn't matter how thin or thick you make the outlines; they'll never shit the div s—or
anything else on the page. All they can do is overlap or be overlapped, as evident in Figure 4-3.

h is has immediately obvious advantages when it comes to trying to map a layout. If things
don't seem to be lining up quite right, you can drop in some outlines to get a sense of where
the element edges sit and not worry about completely wrecking the layout in the process.

Another thing about outlines that dif ers from borders is that an outline must go all the way
around an element, and be the same all the way around. In other words, you cannot simply set
a let outline or a top outline, the way you can with a border. h ere is simply an outline
around all four sides of the element, or else there isn't. In a like manner, you cannot vary the
color, width, or style of the outline on each side. If you want a two-pixel dashed yellow border,
then it will be so all the way around the element.

Note that an element can have both a border and an outline. In such a case, the outline is
drawn just outside the border, so that the outline's inner edge touches the border's outer edge.
If the element has margins, then the outline is drawn over that margin area, but the margins
are not changed or displaced by the outline.