Box Model

  • Layout objects have:
    • Inside padding
    • Outside margin
    • Borders
  • Margin determines where it placed in relation to other objects
  • Padding determines how the inner content lies inside the container
  • Border sets a visual rule around the container with color, width and type:
    • Solid
    • Dotted
    • Dashed
    • Ridged


      *padding expands the width and height and can cause issues.
      !Solution:
      box-sizing:border-box
      Check out Styles, how to...