CSS Block, Inline, & Inline Block Elements
CSS Block, Inline, & Inline Block Elements
Published
User-agent stylesheets or Browser Default Styles
User-agents, or browsers, have basic style sheets that give default styles to any document. These style sheets are named user-agent stylesheets. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same.
Author stylesheets
Author stylesheets are the most common type of style sheet; these are the styles written by web developers. These styles can reset user-agent styles, as noted above, and define the styles for the design of a given web page or application.
Block-level Element or Content:
A block-level element always starts on a new line. In horizontal writing modes, like English or Arabic, it occupies the entire horizontal space of its parent element (container) and vertical space equal to the height of its contents, there by creating a “block”.
inline-level Element or Content
Inline elements display one after the other in the direction that sentences run in that particular writing mode.
These inline boxes are arranged one after the other.
If there is not enough space in the containing block for all of the boxes a box can break onto a new line.
inline-block Element
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
GitHub: GitHub