Box Model & Page Layout

Box Model & Page Layout

???

CSS Layout Quiz

?: Which CSS property is used to set the spacing outside of elements?

( ) spacer (X) margin ( ) padding ( ) border

?: Which CSS property is used to set the spacing inside of elements?

( ) spacer ( ) margin (X) padding ( ) border

?: Which CSS property is used to create a line (stroke) on the outside edge of elements?

( ) spacer ( ) margin ( ) padding (X) border

?: Select the CSS shorthand declaration that accomplishes the result of 5px of padding on all sides of an element.

(X) padding: 5px; ( ) padding-all-sides: 5px; ( ) padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; ( ) padding: 5px all;

?: Select the CSS shorthand declaration that accomplishes the result of 10px of padding on the top and bottom and 20px on the left and right of an element.

( ) padding-top-and-bottom: 20px; padding-left-and-right: 20px; ( ) padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding -right: 20px; (X) padding: 10px 20px; ( ) padding: 20px 10px;

?: Select the CSS shorthand declaration that accomplishes the result of 35px of padding on the top, 5px on both sides (left & right), and 10px on the bottom.

( ) padding-top: 35px; padding-left, padding-right: 5px; padding-bottom: 10px; ( ) padding: 35px 10px 5px; ( ) padding: 35px 10px 5px 10px; (X) padding: 35px 5px 10px;

?: Select the CSS shorthand declaration that accomplishes the result of 10px of padding on top, 20px on the right, 25px on the bottom, and 0px on the left.

( ) padding-top: 10px; padding-right: 25px; padding-bottom: 25px; padding-left: 0; ( ) padding: 0px 25px 20px 10px; (X) padding: 10px 20px 25px 0; ( ) padding: 10px top 20px right 25px bottom 0 left;

?: Select the CSS declaration that will center an element (using spacing outside of the element).

( ) margin: auto 0; (X) margin: 0 auto; ( ) margin-all: auto; ( ) margin: center;

?: If an element set to display: block; has a specified height property, an overflow property set to auto, and content inside that is taller than the element's specified height, a scrollbar will appear.

(X) TRUE ( ) FALSE

?: If an element is set to display: block; and has no width specified (or width: auto;) it will collapse only as wide as the content inside of it.

( ) TRUE (X) FALSE

?: If an element is set to display: inline;, it will not apply top or bottom margins or any width values given to it.

(X) TRUE ( ) FALSE

?: The margins of two statically positioned elements will overlap. (E.g., <div id="one"> has a bottom margin of 10px and <div id="two"> has a top margin of 20px, but the total margin between them is only 20px.)

(X) TRUE ( ) FALSE

?: If an element is set to display: block;, which CSS declaration will allow the element to scale to a width of 100%?

( ) width: auto; ( ) width: 100%; ( ) (Blank; no width declaration is necessary.) (X) All of the above.

?: If an element is set to display: block;, which CSS declaration(s) will set its minimum width to 600px and its maximum to 1000px?

( ) width: 1000px; minimum-width: 600px; (X) min-width: 600px; max-width: 1000px; ( ) width: > 600px < 1000px; ( ) width: 600px 1000px;

?: Which CSS property has the ability to change the way elements display (inline versus block)?

( ) visibility ( ) overflow (X) display ( ) Both A and B.

?: Select the most appropriate CSS declaration to position a <div> element so that other elements that follow after it may occupy space to the right of it.

(X) float: left; ( ) float: none; ( ) position: left; ( ) position: right;

?: Select the most appropriate CSS declaration to position a <div> element so that other elements that follow after it may occupy space to the left of it.

( ) position: right; ( ) float: none; ( ) position: left; (X) float: right;

?: When the CSS declaration clear: both; is applied to an element, it will appear below any floating elements above.

(X) TRUE ( ) FALSE

?: You can apply a specially written class of clearfix to parents with floating children to prevent the parents from collapsing.

(X) TRUE ( ) FALSE

?: Select the most appropriate CSS declaration(s) to set an element to absolute positioning in the top right corner.

( ) position: top right; (X) position: absolute; top: 0; right: 0; ( ) position: absolute; top: 0; left: 0; ( ) None of the above.

?: Fill in the blank: ________ positioning makes an element appear in the same place relative to the browser window even when scrolling occurs.

( ) absolute ( ) static (X) fixed ( ) inherent

?: Fill in the blank: Elements with a(n) _________ z-index will appear above other elements.

( ) lower (X) higher ( ) identical ( ) negative

???

View CSS Layout Quiz on Learn.co and start learning to code for free.