Mike: What are those triangles after some of the property nam es...? Oh, I ge t it! Those
are shorthan d properties and you c an p robably expand them to see their in dividual
properties.
Professor: Exactly! It’s great that you discover things like that without my help.
So, what is happening with the margins? The W3 C specification defines the te rm
collapsing margins, which means, in a nutshell, tha t when the vertical margins of two
elements to uch, they merge to form a single margin, w hose width is equ al to the larger
of both. There are of course exceptions to this rule and I will give you a heads-up
when we come to them.
Mike: We observed b efore that when we added some paddin g to the body, the margins
didn’t collapse any more. That was of course to be expected, as the bo dy padding
separated the margins of both ele ments.
Professor: Pre cisely.
Maria: I noticed that the margin of the <div > element in our first example touched
the top of the win dow while th e margin of the body didn’t. I can now explain why that
happened. The margins have collapsed and the resulting vertical margin width is 20
px, which is the larger of both widths. Since the body’s margin is 12 px narrower than
that of the <div> element, the body’s top margin edge is positioned 12 px below the
window top.
Professor: That’s right. By the way, the body is con ta ined in the content box of the
<html> element. You can examine it in the DevTools if you want to.
5.3 Element Display
Professor: We’ll now examine h ow the display CSS property can influence the be-
havior of the CSS box model. Con trolling the element’s display is one of the more
important aspects of w eb d esign. By changing the type of display you can consider-
ably alter th e way the element finds its position on a page. Let us set the display
property of the <div> element of our last example to inline :
.example-box {
width: 60px;
height: 60px;
padding: 10px;
border: 5px solid;
margin: 20px;
display: inline;
}
We leave the body’s paddin g size at 10 px.
The most obvious effect of setting the element’s display to inline is the ignoran ce of
its width and height properties, which are set to auto as you can see at the right
side of the DevTools window.
5.3. Element Display 79
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.