Spacing Flashcards
On what do margin and padding base their relative size on?
If the value used is rem: the root size.
If the value used is em: the font-size of the element they are affecting.
When might it be a good time to use em’s.
em’s can be useful when we want the padding or margin to scale with font-size in a more dynamic way.
Buttons are a good example.
How can the use of em reduce the dependence on complicated media queries
By linking many things to the font-size of an element, we can use a media query to change the font-size, thereby styling all components who’s em is based on that font-size
What will negative values do with Margin?
Negative values will pull an element outside of it containing parent
What affect on surround elements can a negative margin have.
A negative margin can pull nearby elements closer and this can happen to multiple elements.
What does setting the margin to “auto” attempt to do?
margin: auto; attempts to fill all available space along the axis with margin. This only works on Horizontal margin
What other declaration needs to be made when using margin: auto;
margin: auto; only works with elements that have a explicit width.
Which element will be affected negative margins on the right or bottom. The element with the declaration or nearby elements
Nearby elements will be affected by negative margins on the right and bottom of an element, but it will not affect the element that possess the margin delcaration.
What is margin collapse?
Margin collapse occurs in certain situations where a larger margin will absorb the smaller margin opposite it.
Where does margin collapse occur?
- Adjacent siblings
- Completely empty box
- Parents and first or last child elements
How do you choose whether to use margin or padding on an element?
Use margin if you want more empty space.
Use padding when you want more background.
