CSS Box Model Review Questions

Margie wants to add a solid, red, 1 pixel border to an HTML element. Which of these is a correctly written value for this border?

1px solid red;

When you are styling elements on a webpage using the Box Model properties you have to account for the amount of space that is required to display each element. The calculation you use to determine the width required to display an HTML element on the page is: Total Width = Left Margin + Left Border + Left Padding + Width + Right Padding + Right Border + Right Margin Assume that an HTML element has the following CSS. .box { border: 2px solid #000000; margin: 20px; padding: 10px; width: 200px; } What is the total width?

264

Johnna wants to use the CSS width and height properties to control the size of an HTML <div> tag. She believes that the CSS width and height properties are measured in inches. Is this knowledge true or false?

False

The outline is similar to a border in that a line is drawn around the element. Unlike the border though the outline must be the exact same on all four sides of an element. Where in the box model does the outline appear?

Outside the border but inside the margin of an HTML element.

Block-level HTML tags are tags that appear on their own line, that is, no other HTML elements appear on either the left or the right of the element.

True

Both the margin and padding properties can be written independently for each side (top, right, bottom, left) of an HTML element or collectively for all four sides.

True

The ______________ property allows you to specify a border for the element.

border

Put the CSS Box Model properties in order from the outermost layer to the innermost layer.

margin border padding content

The margin property can be written three different ways depending upon your needs. For example, you can set the margin for each side of an element independently by writing four values. What is the correct format for this?

margin: top right bottom left;

The padding property can be written three different ways depending upon your needs. For example, you can set the vertical padding (top and bottom) and the horizontal padding (left and right) independently by writing two values. What is the correct format for this?

padding: vertical horizontal;

The CSS padding property allows you to control:

the extra space inside an HTML element

The CSS margin property allows you to control:

the extra space outside of an HTML element