Lesson 4 Flashcards
block level elements
occupy any avaible width, regardless of their content and begin on a new line
in-line elements
occupy only the width their content requires and line up on the same line one after the other
what are the most common display values
block, inline,inline-block and none
what happens when you use a display value of none
completely hides the element and renders the page as if the element doesnt exist
what is the box model
every element on a page is a rectangular box and may have width height padding borders and margins
what properties go into a box model
width, height, padding, border and margin
what is the default width of a block element
100%
what elements does width become non-relevant with?
inline and inline block
height
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
on which elements does height and width become irrelevant. and which element can you apply them to
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.
margin
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,
One oddity with the margin property is that vertical margins, top and bottom, are not accepted by which elements
inline-level
padding
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.
Margin & Padding on Inline-Level Elements
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.
how do colors apply to margins and paddings
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.
borders
Borders fall between the padding and margin, providing an outline around an element. The border property requires three values: width, style, and color
what are the most common styles of borders
most common style values are solid, double, dashed, dotted, and none, but there are several others to choose from.
border radius
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.
what are the three values of the box sizing property
content-box, padding-box, and border-box
content box
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.
what are the most common vendor prefixes for box-sizing
- moz-box-sizing:mozilla firefox
- webkit-box-sizing:chrome and safari
- ms-box-sizing:internet explorer
padding box
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.
border box
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.
what is the best box sizing value and why
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.
width
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:
