Some properties:

• padding increases the space between the border of a box and the content of the box.
• margin increases the space between the borders of a box and the borders of adjacent boxes.
• border adds space (even if it’s only a pixel or two) between the margin and the padding.

The Box Model

• Block and inline boxes

  • The type refers to how the box behaves in terms of page flow and in relation to other boxes on the page.
  • To toggle between the display modes, you can change
    • display: inline
    • display: block
    • display: inline-flex
    • display: flex

• Outer display type

  If outer display type: block	If outer display type: inline
  The box will break onto a new line.	The box will not break onto a new line.
  The width and height properties are respected.	The width and height properties are not applicable.
  Padding, margin and border will cause other elements to be pushed away from the box.	Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
  If width is not specified, the box will extend in the inline direction to fill the space available in its container. In most cases, the box will become as wide as its container, filling up 100% of the space available.	Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
  Some HTML elements, such as <h1> and <p>, use block as their outer display type by default.	Some HTML elements, such as <a>, <span>, <em> and <strong> use inline as their outer display type by default.

• Inner display type

  • It dictates how elements inside that box are laid out.
  • You can change the inner display type, for example, by setting display: flex;. The element will still use the outer display type block but this changes the inner display type to flex.

• Parts of a box

  • Content box: The area where your content is displayed; size it using properties like inline-size and block-size or width and height.
  • Padding box: The padding sits around the content as white space; size it using padding and related properties.
  • Border box: The border box wraps the content and any padding; size it using border and related properties.
  • Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.

• Types of box models

  • There is a standard and an alternate box model. By default, browsers use the standard box model.

  • The standard CSS box model

    • The total size taken up by a box in this model is the given height/width + padding +border.
    • For example, the actual space taken up by the box here will be 410px (350 + 25 + 25 + 5 + 5) wide and 210px (150 + 25 + 25 + 5 + 5) high:

      .box {
      	width: 350px; 
      	height: 150px;
      	margin: 10px;
      	padding: 25px;
      	border: 5px solid black;
      }
      

  • The alternative CSS box model

    • The content area width is the given width minus the width for the padding and border.
    • To turn on the alternative model:

      •   .box {
            box-sizing: border-box;
          }
        

• Margins

  • Margins can have positive or negative values.
  • Whether you are using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.
  • Equivalent longhand properties: margin-top, margin-right, margin-bottom, margin-left.

  • Margin collapsing

    • Two positive margins will combine to become one margin. Its size will be equal to the largest individual margin.
    • Two negative margins will collapse and the smallest (furthest from zero) value will be used.
    • If one margin is negative, its value will be subtracted from the total.
  • More about margins at the end of the page.

• Borders

  • The border is drawn between the margin and the padding of a box.
  • To set the properties of each side individually, use:
    • border-top
    • border-right
    • border-bottom
    • border-left
  • To set the width, style, or color of all sides, use:
    • border-width
    • border-style
    • border-color
  • To set the width, style, or color of a single side, use one of the more granular longhand properties:
    • border-top-width
    • border-right-style
    • border-bottom-color

• Padding

  • You cannot have a negative padding.
  • Equivalent longhand properties: padding-top, padding-right, padding-bottom, padding-left.

• The box model and inline boxes

  •    <p>I am a paragraph and this is a <span style="margin: 20px;padding: 5px;width: 80px;height: 50px;background-color: red;border: 2px solid blue;">span</span> inside that paragraph. A span is an inline element and so does not respect width and height.</p>
    

  • I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height.

• Using display: inline-block

  • display: inline-block is a special value of display, which provides a middle ground between inline and block.
  • What display: inline-block does that we already know about:
    • The width and height properties are respected. (Also done by block display type)
    • padding, margin, and border will cause other elements to be pushed away from the box. (Also done by block display type)
    • It does not break onto a new line.
    • It becomes larger than its content if you explicitly add width and height properties.
  • Inline-block is a useful tool to know about, but in practice, you’ll probably end up reaching for flexbox(learn after CSS) more often if you’re trying to line up a bunch of boxes.

Margins

• Margins are set using lengths, percentages, or the keyword auto.
• margin is a shorthand property and accepts up to four values.

  •   .box {
          margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>
      }</margin-left></margin-bottom></margin-right></margin-top>
    

• If fewer than four values are set, the missing values are assumed based on the ones that are defined.
  • If the top and right margin values are defined, the left assumes the value of the right margin, and the bottom assumes the value of the top margin.
  • If only one value is defined, this sets all four margins to the same value.
  • Any of the individual margins can be declared using longhand, in which case you would define only one value per property.

• auto and centering

  • A value of auto basically tells the browser to define the margin for you.
  • In most cases, a value of auto will be equivalent to a value of 0 or else whatever space is available on that side of the element.
  • It should also be pointed out that auto is useful only for horizontal centering, and so using auto for top and bottom margins will not center an element vertically.
  • Example:

    	.container {
    		width: 980px;
    		margin: 0 auto;
    	}
    

Divs and Spans

• divs and spans give no particular meaning to their content. They are just generic boxes that can contain anything.

• divs	spans
  Div is a block-level element by default.	Span is an inline-level element by default.
  Divs allow us to divide the page into different blocks and apply styling to those blocks.	It can be used to group text content and inline HTML elements for styling and should only be used when no other semantic HTML element is appropriate.