CSS Box Model Review Study Guide

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?

264px

What quick CSS hack can be done to the parent element so that the top margin of its child element does NOT collapse?

Add padding-top: 1px (or smaller value, e.g., 0.1) to the parent element and its child will stop losing its top margin.

TRUE OR FALSE: CSS width and height properties can be set in inches.

FALSE

TRUE OR FALSE: Left and right (horizontal) margins of adjacent elements will sometimes collapse, either overlapping or disappearing entirely.

FALSE

TRUE OR FALSE: Padding of adjacent elements will sometimes collapse, either overlapping or disappearing entirely.

FALSE

TRUE OR FALSE: The CSS property width refers to the total space an element takes up on a page, including any padding, borders, and margins left to right.

FALSE. Width refers only to the space taken up by the content of an element (as seen in the box model); any padding, borders, and margins left to right would take up additional space on the page.

TRUE OR FALSE: Block-level HTML elements appear on their own line because the computer sees them as stretching across the entire page; no other HTML elements appear on either the left or the right of the element.

TRUE

TRUE OR FALSE: Both display:inline; and float:left; can be used to make block elements act like inline elements.

TRUE

TRUE OR FALSE: If a paragraph is told to float:left; its appearance will not change unless that paragraph is given a width smaller than 100% of the page (whether in px or in %).

TRUE

TRUE OR FALSE: Margins on floating elements will NOT collapse, even the vertical ones.

TRUE

TRUE OR FALSE: Top and bottom (vertical) margins of adjacent elements will sometimes collapse, either overlapping or disappearing entirely.

TRUE

When all values are the SAME (e.g., the margin all around is 10px), both margin and padding properties can be written with only one value for all four sides, such as margin:10px; .

TRUE

If we were to give a div element the following style rule-- div { display:flex; justify-content: center; align-items: center; } what would happen to the paragraph inside the div?

The paragraph would display in the center of the div both horizontally and vertically.

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

border

Margie wants to add a solid, red, 1 pixel border to an HTML element. If we ony want to write one CSS declaration for the border, what is the correct order for style, width, and color?

border: width, style, color --> border: 1px solid red;

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 way?

margin: top right bottom left;

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

margin: vertical horizontal; (ex. margin: 0 auto;)

The CSS padding property allows you to control what area?

the extra space inside the border (whether visible or invisible) of an HTML element

The CSS margin property allows you to control what area?

the extra space outside the border (whether visible or invisible) of an HTML element