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 elem…


This content originally appeared on DEV Community and was authored by Albert Chang

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.


This content originally appeared on DEV Community and was authored by Albert Chang


Print Share Comment Cite Upload Translate Updates
APA

Albert Chang | Sciencx (2021-08-17T06:36:59+00:00) Block vs. Inline vs. Inline-Block. Retrieved from https://www.scien.cx/2021/08/17/block-vs-inline-vs-inline-block/

MLA
" » Block vs. Inline vs. Inline-Block." Albert Chang | Sciencx - Tuesday August 17, 2021, https://www.scien.cx/2021/08/17/block-vs-inline-vs-inline-block/
HARVARD
Albert Chang | Sciencx Tuesday August 17, 2021 » Block vs. Inline vs. Inline-Block., viewed ,<https://www.scien.cx/2021/08/17/block-vs-inline-vs-inline-block/>
VANCOUVER
Albert Chang | Sciencx - » Block vs. Inline vs. Inline-Block. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/17/block-vs-inline-vs-inline-block/
CHICAGO
" » Block vs. Inline vs. Inline-Block." Albert Chang | Sciencx - Accessed . https://www.scien.cx/2021/08/17/block-vs-inline-vs-inline-block/
IEEE
" » Block vs. Inline vs. Inline-Block." Albert Chang | Sciencx [Online]. Available: https://www.scien.cx/2021/08/17/block-vs-inline-vs-inline-block/. [Accessed: ]
rf:citation
» Block vs. Inline vs. Inline-Block | Albert Chang | Sciencx | https://www.scien.cx/2021/08/17/block-vs-inline-vs-inline-block/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts