box model Flashcards
box model inner to outer
content, padding, border, margin
content
content being considered –> text block, button, image
padding
space between content and border
adds to overall width and height of the content element
border
if border is present –> appears on the outer edge of the padding
adds to overall width and height of the content element
margin
invisible space between the outer edge/border of an element’s box and and the next closest element’s box
width
sets width of element’s content area
height
sets height of element’s content area
min-width
sets the min width an element can be
even if content is set to something smaller –> element wont shrink past this width
min-height
sets the min height an element can be
max-width
sets the max width an element can expand to
max-height
sets the max height an element can expand to
px
pixels, fixed
%
percentage of parent container
em
relative to the font size of the element
vw and vh
relative to the viewport width and height
