5.2 CSS Box Model

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

h1, nav a {

font-variant: small-caps;

}

Incidenta lly, there is one little erro r in your HTML code. The HTML re ference on

page 327 says that a < caption> element can o nly appear as the ﬁrst child of a table.

So you must p ut it immediately after the <table> start tag in your code to satisfy the

speciﬁcation.

I have one last thing to note. Today you’ll learn that there exist sp ecial p seudo-classes

like :link or :visit ed, which give you more control over styling hyperlinks.

Mike: We still have two questions that bother u s. First, we wanted to wrap text around

the table. I recall that we’ve alr eady stumbled upon the problem of text wrapping but

we haven’t solved it yet. Second, we wanted to arrange the navigational links in a line

instead of a column. How do we do that?

Professor: The good news is that both your question s fall in the same category, which

we shall talk about today. Let me begin with the CSS box model.

5.2 CSS Box Model

Professor: In web design, one very important concept is the so-ca lled CSS bo x model.

You kn ow, every element you place on a web page is tre ated as a little box by a

browser. Your life will be easier if you star t thinking of boxes as well. The ﬁgure

below illustrates what the CSS box looks like.

content

top padding

top border

top ma rgin

bottom padding

bottom border

bottom margin

left margin

left border

left pad ding

right padding

right border

right margin

At the core of the CSS box is the content box. Tha t’s whe re all text and images

appear, while the other three boxes (that is the padding, border, and margin box) are

used exclusively to sep arate the content from neighboring elemen ts. Th e padding

clears space immediately a round the content. Although no text or images intrude into

the padding area, the padding is aﬀected by the background color or image. The

border repre sents a border ar ound the padding, which is usually made visible. Since

74 Meeting 5. Understanding CSS Boxes

the background color and image expand under the border as well, the background

may protrude through the b order if it is dotted or dashed. The margin represents

white space outside of the border and it sepa rates one element from the other. The

backgr ound color and image don’t go under the margin, so the margin is c ompletely

transparent.

Mike: You mean white?

Professor: No, transparent. If an element is drawn inside an other element, then that

other element’s color is seen through the contained element’s margin.

The perimeter of ea ch of the four boxes of the CSS box is called an edge. For exam ple,

the rectangle marking oﬀ the paddin g box is called a padding edge. As you can see

in the above ﬁgure, the margin, border, and padding can be b roken down into four

segments: top, right, bottom, and left. You can set each of them individually using

correspo nding CSS properties.

I would like you to pay special attention to the diﬀerence between the margin and

padding since the two are often confused. Both add space around the content and

you use them to separate one element from another. Unless you apply a bor der or a

backgr ound color or image, it is actually ha rd to tell whether space around the con -

tent is caused by the padding or the m argin. With a border or background, h owever,

the diﬀerence becomes signiﬁcant. Since the paddin g separates the content from the

border, it keeps the content from appearing jammed inside the box. Margins, on the

other hand, provide white space between elements and relax the tension between them,

which gives a page a lighter appearance .

Maria: So far it looks quite straightforward, but I’m afraid things will become com-

plicated in practice.

Professor: I’m afraid that you’re right. Some of the conce pts you’re going to learn

today are pretty diﬃcult to grasp. So, let’s dive into some examples, so you can g et a

clearer picture of the idea.

Consider, for example, the next fragments of CSS and HTML code:

.example-box {

width: 60px;

height: 60px;

padding: 10px;

border: 5px solid;

margin: 20px;

}

<body>

</body>

We will investigate the behavior of the code in Google Chrome. Having loaded the

code into the browser, you pre ss Ctrl+Sh ift+I, or select

Tools→Developer Tools

5.2. CSS Box Model 75

from the Chrome menu ( ) at the top-right of th e browser window to open the Devel-

oper Tools (DevTools for short). On the following screenshot the DevTools window

is located in the lower part of the browser window.

If you don’t see the same picture, select the Eleme nts pane from the top menu of the

DevTools and the

Styles pane from the right part of the DevTools window. In the

HTML tree in the left half o f the DevTools, select the <div> element (expand the

tree if necessary by clicking a correspond ing gr ay triangle) and in the right part of the

DevTools you will see the CSS box view of that element. If you don’t see it, then scroll

down that part of the DevTools window till you do. Notice tha t the measurements are

the same as we deﬁned them by the exampl e-box class. Now let the mouse pointer

hover over the same <div> element in the docum ent tree on the left. Notice that

hovering the mouse over the element colors the area s over the space o ccupied by the

element in the document window above the DevTools. The exact are as c overed by

diﬀerent boxes of th e element are colored. Notice also that in the tooltip above the

element in the document window you can see dimensions of the element’s border box,

90 × 90 px in our case.

Maria: Why is the margin so huge at the right? The large, middle gray area is the

margin, isn’t it?

Professor: That’s true, but let me explain the whole box model. The wi dth and

height properties actually control the size of th e content box. The content box is

a little darker gray box in the center of th e box mod el with the measurements 60 ×

60 written inside it as you ca n see on th e screenshot. You ca n also see the padding,

border, and margin, all with the exact dimensions written inside the m. These all match

the dimensions speciﬁed by our CSS rule.

You already noticed that the margin is so mewhat special. The m argin represents empty

space around an ele ment and is more ﬂexible. <div> elements, as you may re call,

have a block display and they want to oc cupy the whole available width, which is

the body’s content box in our case. Because we explicitly made the <div> element

76 Meeting 5. Understanding CSS Boxes

narrower by setting its width to 60 pixels, the empty space is ﬁlled b y automatically

extending its right margin, which you can see at the right side of the element.

Let’s now select th e <body> element in the HTML tree and hover the mouse pointer

over it.

On the right side of the DevTools window you now see the CSS box of the <body>

element, while at the top, in the document part of the window, you see the actual areas

covered by the content and margin boxes of the body.

Maria: Is the margin of the body deﬁned in the default style sheet of the browser?

Because w e haven’t deﬁned it.

Professor: That’s right.

If yo u compare the last two screenshots, you will notice that the width of the body’s

content b ox is made just big enough to accommoda te the whole <di v> element includ-

ing its horizontal ( le ft and right) paddings, borders, a nd margins. Thing s, however, are

diﬀerent in the vertical direction. Vertical (top and bottom) margins are ignored and

top and bottom border edges of the <div> element sit directly on the content e dges of

the body. In other words, the body content box is just high enough to accommodate

the <div> element without its vertical margins.

Let’s now add so me padding to the <b ody> e le ment:

body {

padding: 10px;

}

The situation is quite diﬀerent now, as you can see on the following screenshot.

5.2. CSS Box Model 77

The <div> e le ment is now completely inside the body’s c ontent box, even with its

vertical margins. You can see that in the document part of the window above the

DevTools and because the height of the body’s content box is now the same as is th e

height of the <div> element’s margin box, which is 130 px, as yo u can see in the

center of the CSS box on the right sid e of the DevTools window.

This is probably the time when you can start pulling your hair o ut, trying to ﬁgure out

what is happ ening with the margins. To get so me feeling for this, you may want to

experiment with the DevTools. If you again select the <div> element from the HTM L

tree on the left and scroll the right par t of the D evTools win dow to the top, you will

see our CSS rule for the < div> element. Hovering the mouse pointer ab ove the rule

will produce check boxes, which you can u se to switch individual declarations o n and

oﬀ in situ. You can also chan ge the values of the prop erties if you want, or even add

new declarations to the rule.

Note, however, that any change s you made to the rules in the DevTools will not aﬀect

your original CSS ﬁle.

78 Meeting 5. Understanding CSS Boxes

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 5.2 CSS Box Model

Create new playlist

Sign In

Sign Up

Table of Contents for
5.2 CSS Box Model