Question
What is the difference between display: block;
and display: inline;
?
Answer
Elements with display: block;
will:
- start on a new line
- take up all available horizontal space - default
width
is thewidth
of its container, not its content - not have any elements sitting to its left or right, by default
- respect
margin
andpadding
on all sides - respect
width
andheight
when specified
Elements with display: inline;
will:
- not start on a new line
- take up only as much horizontal space as necessary - the
width
of its content - will have other elements that are not set to
display: block;
sitting to its left and right - respect horizontal (left/right)
margin
andpadding
- not respect
width
andheight