All HTML elements written in CSS have a box around them, and understanding these boxes is important in mastering how to create layouts for a webpage.
The type of box applied to an element is defined by the display property and boxes have an outer display type and an inner display type.
Outer Display Type
The outer display type determines if the box is inline or block. These boxes are so classed in reference to their behavior in the flow of a webpage and relation to other boxes
Block Boxes
Block boxes start on a new line and extend to fill the available inline space
HTML elements, such as <h1> and <p>, use block as their outer display type by default.
Inline Boxes
Inline boxes don’t start on a new line and are only as large as their content
HTML elements, such as <a>, <span>, <em> and <strong>use inline as their outer display type by default.
See the Pen Untitled by stephen (@solar0) on CodePen.
Inner Display Type
The inner display type determines how elements inside a particular box are laid out. By default, the elements inside a box are laid out in normal flow, just like any other block and inline elements (as explained above).
We can, however, change the inner display type by using display values like flex and then style the boxes according to flex rules.
The CSS box model defines how the different parts of a box — margin, border, padding, and content — work together to create the layout of a page.
The image below illustrates the box model:
Content box: The area where your content is displayed, which can be sized using properties like width and height
Padding: The padding sits around the content as white space; its size can be controlled using the padding property
Border: The border wraps the content and any padding. Its size and style can be controlled using the border property
Margin: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between the box and other elements. Its size can be controlled using the margin property
Examples
Top comments (0)