Please enable JavaScript.

Coggle requires JavaScript to display documents.

3.7: CSS box model - display - Coggle Diagram

- - - - but there are other differences
    - - take up an entire line
    - - fit in the current line
    - - by default
  - - - ignores
        
        height and width
      - sort of works
        
        but not totally adhered to
        
        for example
        
        may be applied horizontally
        
        but not vertically
        
        padding and margin
    - - respects
        
        height and width
        
        padding and margin
    - - behaves like an inline element
      - :!!: except
        
        respects
        
        height and width
        
        padding and margin
- - - - always relative to some other value
      - sometimes
        
        relative to a value in the parent
        
        width: 50%
        
        half the width of the parent
        
        menubar takes up the whole width of the body
        
        body.active .top_menubar { margin-left: 0; width: 100%; }
        
        when active
        
        relative to a value in the element itself
        
        line-height: 50%
        
        half the font size of the element
    - - with font size
        
        an em equals
        
        the font-size of the parent
        
        h2 { font-size: 2em; }
      - with other properties
        
        an em equals
        
        the computed font size of the element itself
        
        h2 { margin-left: 2em; }
    - - root em's
      - relative to the root html element's font size
        
        where the root element is
        
        <html>
        
        which has a default font size
        
        can be changed
        
        html { font-size: 20px; }
      - address a problem with em's
        
        if elements are nested
        
        eg. <ul>/<li>'s
        
        with each nested list
        
        the font size will get bigger or smaller
        
        ul { font-size: 1.5em; }
        
        there's a snowball effect
        
        because each element's font size
        
        is relative to it's parent
    - - vh, vw, and more...
  - - - most common
      - pixels
    - - pt, cm, in, mm
      - rarely used