Block
- Line break
- The width and height properties are respected.
- Available padding and margin of your container
- If width (width: 100%) is not specified, the box will extend in the inline direction to fill the space available in its container.
div, p, h1, h2, h3, h4, h5, h6
Visibility
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
div
Placeat ullam velit quisquam fugit incidunt nulla deserunt nam quidem?
paragraph
Error doloribus amet velit placeat culpa a tenetur tempora
h6
accusantium minima ab.
display:inline
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
div
Placeat ullam velit quisquam fugit incidunt nulla deserunt nam quidem?
paragraph
Error doloribus amet velit placeat culpa a tenetur tempora
h6
accusantium minima ab.
display:flex, direction:row
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
div
Placeat ullam velit quisquam fugit incidunt nulla deserunt nam quidem?
paragraph
Error doloribus amet velit placeat culpa a tenetur tempora
h6
accusantium minima ab.
Inline
- There is NO line break
- The width and height properties will not apply.
span, em, strong, a
Visibility
Lorem ipsum dolor sit amet consectetur adipisicing elit.
span
Ad, quo minima, laudantium eos libero sed qui ipsum
emphasis
doloremque accusamus, minus et cum!
strong
Iure commodi doloribus neque ipsa, quae eaque ratione?
display:block
Lorem ipsum dolor sit amet consectetur adipisicing elit.
span
Ad, quo minima, laudantium eos libero sed qui ipsum
emphasis
doloremque accusamus, minus et cum!
strong
Iure commodi doloribus neque ipsa, quae eaque ratione?
display:flex, direction:row
Lorem ipsum dolor sit amet consectetur adipisicing elit.
span
Ad, quo minima, laudantium eos libero sed qui ipsum
emphasis
doloremque accusamus, minus et cum!
strong
Iure commodi doloribus neque ipsa, quae eaque ratione?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, corporis? Nostrum, ad? Repellat voluptas minima soluta iste modi non, delectus consequuntur distinctio quaerat?
- The width and height properties are respected.
- padding, margin, and border will cause other elements to be pushed away from the box.
Ipsam totam fugiat facere voluptas, nisi reiciendis!
