WGU D276 Web Dev Chp 5 Study Guide with Complete
Solutions
An introduction to the box model
• When a browser displays a webpage, it places each HTML block element in a box.
o Makes it easy to control the spacing, boarders, and other formatting for elements
like headers, sections, footers, headings, and paragraphs.
• Some inline elements like images are placed in a box as well
o To work with boxes, you use the CSS box model
How the box model works
• By default, the box for a block element is as wide as the block that contains it and as tall as
it needs to be based on its content
o However, you can explicitly specify the size of the content area for a block element
by using the height and width properties
o You can also use other properties to set the boarders, margins, and padding for a
block element
• Fixed layout
o The size of a page won’t change if the user changes the size of the browser window
• Margin
o The space between the border or an element and either its containing block or
the element next to it
• Padding
o The space between an element and it border
Formula for calculating the height of a box
Top margin + top border + top padding + <----top of box
Height + <----of content area
Bottom padding + bottom border + bottom margin <----bottom of box
Formula for calculating the width of a box
Left margin + left border + left padding +
Width +
Right padding + right border + right margin
A web page that illustrates the box model
The HTML for a page that uses the box model
<body>
<main>
<h1>San Joaquin Valley Town Hall</h1>
<p>Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season!
, </p>
</main>
</body>
The CSS for the page
Body {
Border: 3px dotted black;
Margin: 10px;
}
Main {
Border: 3px dotted black;
Width: 500px;
Margin: 20px; /*all four sides*/
Padding: 10px; /*all four sides*/
}
h1, p {
Border: 1px dashed black;
Padding: 10px;
}
h1 {
Margin: .5em 0 .25em; /*.5em top, 0 right and left, .25em
bottom*/ Padding-left: 15px;
}
p{ Margi
n: 0;
Padding-left: 15px;
How to size and space elements
How to set widths and heights
• The two properties you’ll use the most is width and height
o By default, these properties are set to a value of “auto”
▪ The size and content area for the element is automatically adjusted so it's
as wide as the element that contains it and as tall as the content it contains
• To change that, you use the height and width properties
o Can be set to absolute or relative values
Solutions
An introduction to the box model
• When a browser displays a webpage, it places each HTML block element in a box.
o Makes it easy to control the spacing, boarders, and other formatting for elements
like headers, sections, footers, headings, and paragraphs.
• Some inline elements like images are placed in a box as well
o To work with boxes, you use the CSS box model
How the box model works
• By default, the box for a block element is as wide as the block that contains it and as tall as
it needs to be based on its content
o However, you can explicitly specify the size of the content area for a block element
by using the height and width properties
o You can also use other properties to set the boarders, margins, and padding for a
block element
• Fixed layout
o The size of a page won’t change if the user changes the size of the browser window
• Margin
o The space between the border or an element and either its containing block or
the element next to it
• Padding
o The space between an element and it border
Formula for calculating the height of a box
Top margin + top border + top padding + <----top of box
Height + <----of content area
Bottom padding + bottom border + bottom margin <----bottom of box
Formula for calculating the width of a box
Left margin + left border + left padding +
Width +
Right padding + right border + right margin
A web page that illustrates the box model
The HTML for a page that uses the box model
<body>
<main>
<h1>San Joaquin Valley Town Hall</h1>
<p>Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season!
, </p>
</main>
</body>
The CSS for the page
Body {
Border: 3px dotted black;
Margin: 10px;
}
Main {
Border: 3px dotted black;
Width: 500px;
Margin: 20px; /*all four sides*/
Padding: 10px; /*all four sides*/
}
h1, p {
Border: 1px dashed black;
Padding: 10px;
}
h1 {
Margin: .5em 0 .25em; /*.5em top, 0 right and left, .25em
bottom*/ Padding-left: 15px;
}
p{ Margi
n: 0;
Padding-left: 15px;
How to size and space elements
How to set widths and heights
• The two properties you’ll use the most is width and height
o By default, these properties are set to a value of “auto”
▪ The size and content area for the element is automatically adjusted so it's
as wide as the element that contains it and as tall as the content it contains
• To change that, you use the height and width properties
o Can be set to absolute or relative values
