Please enable JavaScript.

Coggle requires JavaScript to display documents.

3.6: CSS box model - content, border, margin and padding - Coggle Diagram

- - - - so if the content box is 100px x 100px
      - and the border is 5px wide
      - the whole box will be 110px x 110 px
      - unless:!:
        
        you specify
        
        :warning: box-sizing: border-box;
        
        in which case
        
        the border will be rendered within the content box
        
        and the whole box is still
        
        100px x 100px
    - - single property
        
        border-left-colour: blue;
      - multiple properties
        
        border-right: 1px solid purple;
        
        border shorthand
    - - border: 1px solid purple;
      - to set multiple properties
      - border: width style colour
      - this pattern is used frequently
        
        to set multiple properties in one go
- - - - apply to all four sides
        
        padding: 10px
      - vertical | horizontal
        
        padding: 10px 20px
      - top | horizontal | bottom
        
        padding: 10px 20px 5px
        
        confusing syntax:warning:
      - top | right | bottom | left
        
        padding: 10px 20px 5px 15px
    - - to set multiple properties in one go
    - - use zero
      - padding: 0 20px
- - - - apply to all four sides
        
        margin: 10px
      - vertical | horizontal
        
        margin: 10px 20px
      - top | horizontal | bottom
        
        margin: 10px 20px 5px
        
        confusing syntax:warning:
      - top | right | bottom | left
        
        margin: 10px 20px 5px 15px
    - - to set multiple properties in one go
    - - use zero
      - margin: 0 20px