An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
August 17, 2021 06:36 am GMT
Original Link: https://dev.to/a89529294/block-vs-inline-vs-inline-block-55j4
Block vs. Inline vs. Inline-Block
Block
elements with display: block;
.
- It occupies the entire horizontal space of its parent element.
- Always start on a new line.
Most elements by default belongs to this category. For a complete list please refer to MDN list of block elements
Inline
elements with display: inline;
- Does not start on a new line.
- Its width and height are determined by the content.
- Not affected by width, height, margin-top, margin-bottom properties.
- Affected by horizontal padding and margin.
- Affected by padding-top and padding-bottom, but only visually. Other elements will not respect the vertical paddings.
For a complete list of inline elements MDN list of inline elements
Inline-block
elements with display: inline-block
- An inline element that respects margin, width and height.
Original Link: https://dev.to/a89529294/block-vs-inline-vs-inline-block-55j4
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To