Lesson 4

Question 1

block level elements

Answer 1

occupy any avaible width, regardless of their content and begin on a new line

Question 2

in-line elements

Answer 2

occupy only the width their content requires and line up on the same line one after the other

Question 3

what are the most common display values

Answer 3

block, inline,inline-block and none

Question 4

what happens when you use a display value of none

Answer 4

completely hides the element and renders the page as if the element doesnt exist

Question 5

what is the box model

Answer 5

every element on a page is a rectangular box and may have width height padding borders and margins

Question 6

what properties go into a box model

Answer 6

width, height, padding, border and margin

Question 7

what is the default width of a block element

Answer 7

100%

Question 8

what elements does width become non-relevant with?

Answer 8

inline and inline block

Question 9

height

Answer 9

The default height of an element is determined by its content. An element will expand and contract vertically as necessary to accommodate its content. To set a specific height for a non-inline element, use the height property

Question 10

on which elements does height and width become irrelevant. and which element can you apply them to

Answer 10

inline-level elements will not accept the width and height properties or any values tied to them. Block and inline-block elements will, however, accept the width and height properties and their corresponding values.

Question 11

margin

Answer 11

The margin property allows us to set the amount of space that surrounds an element. Margins for an element fall outside of any border and are completely transparent in color. Margins can be used to help position elements in a particular place on a page or to provide breathing room,

Question 12

One oddity with the margin property is that vertical margins, top and bottom, are not accepted by which elements

Answer 12

inline-level

Question 13

padding

Answer 13

very similar to the margin property;
falls inside of an element’s border, should an element have a border.
used to provide spacing directly within an element. works vertically on inline-level elements
. This vertical padding may blend into the line above or below the given element, but it will be displayed.

Question 14

Margin & Padding on Inline-Level Elements

Answer 14

Margins only work horizontally—left and right—on inline-level elements
Padding works on all four sides of inline-level elements; however, the vertical padding—the top and bottom—may bleed into the lines above and below an element.

Question 15

how do colors apply to margins and paddings

Answer 15

For margins, we see the background color of the parent element, and for padding, we see the background color of the element the padding is applied to.

Question 16

borders

Answer 16

Borders fall between the padding and margin, providing an outline around an element. The border property requires three values: width, style, and color

Question 17

what are the most common styles of borders

Answer 17

most common style values are solid, double, dashed, dotted, and none, but there are several others to choose from.

Question 18

border radius

Answer 18

The border-radius property accepts length units, including percentages and pixels, that identify the radius by which the corners of an element are to be rounded. A single value will round all four corners of an element equally; two values will round the top-left/bottom-right and top-right/bottom-left corners in that order; four values will round the top-left, top-right, bottom-right, and bottom-left corners in that order.

Question 19

what are the three values of the box sizing property

Answer 19

content-box, padding-box, and border-box

Question 20

content box

Answer 20

The content-box value is the default value, leaving the box model as an additive design. If we don’t use the box-sizing property, this will be the default value for all elements. The size of an element begins with the width and height properties, and then any padding, border, or margin property values are added on from there.

Question 21

what are the most common vendor prefixes for box-sizing

Answer 21

• moz-box-sizing:mozilla firefox
• webkit-box-sizing:chrome and safari
• ms-box-sizing:internet explorer

Question 22

padding box

Answer 22

The padding-box value alters the box model by including any padding property values within the width and height of an element. When using the padding-box value, if an element has a width of 400 pixels and a padding of 20 pixels around every side, the actual width will remain 400 pixels. As any padding values increase, the content size within an element shrinks proportionately.

Question 23

border box

Answer 23

Lastly, the border-box value alters the box model so that any border or padding property values are included within the width and height of an element. When using the border-box value, if an element has a width of 400 pixels, a padding of 20 pixels around every side, and a border of 10 pixels around every side, the actual width will remain 400 pixels.

Question 24

what is the best box sizing value and why

Answer 24

border box
If we want an element to be 400 pixels wide, it is, and it will remain 400 pixels wide no matter what padding or border values we add to it.

Question 25

width

Answer 25

The default width of an element depends on its display value. Block-level elements have a default width of 100%, consuming the entire horizontal space available. Inline and inline-block elements expand and contract horizontally to accommodate their content. Inline-level elements cannot have a fixed size, thus the width and height properties are only relevant to non-inline elements. To set a specific width for a non-inline element, use the width property: