CSS Box Model

Note: this section is intentionally awful-looking

Overview

The Box, The Box!

This section will elaborate on the CSS Box Model, and will help to review section 8 of the Udemy course by Colt Steele

  • In the box model, each element on our page can be thought of as comprising a box of content, made up of a specific height and width. The content box is enclosed within a layer of padding which is itself surrounded by a border, and this border is separated from other elements by a margin
  • We can manipulate any aspect of a content box/tag in css, but this section focuses on the spatial dimensions. The simplest ones to learn are to manipulate height and width, like so: div{height:200px;}
  • One of the easiest ways to make a circular border is to use the border-radius property, set it to 50%. It's always useful to remember the shorthand for border adjustment: border:size style color, e.g. border:10px dotted green;
  • Adding padding is pretty easy to do, and it's easy to measure the results visually using Codepen. The shorthand for padding is not too tough: 1 number changes all sides, 2 changes the vertical then horizontal, 3 values change top horizontal and bottom, and 4 changes top right bottom left (clockwise). We the buttons below more information
  • Margin has the same shorthand as padding. Simply, it is the space between one element and other elements, top/right/below/left of the original element. The inline-span in the heading of this page demonstrates margin...although note the lack of padding on top!
  • The display property decides whether an element is treated as a block, inline or inline-block element, along with the layout used for the children: flow layout, grid, or flex.
  • Remember:
    1. Block elements break the flow of a document. Width, height, margin and padding are respected
    2. With inline elements, width and height are ignored. However, margin and padding push elements aways horizontally but NOT vertically!
    3. Inline-Block elements behave much like an inline elements, although (like a block element) width, height, margin, and padding are respected
  • Remember that we have relative values (em, rem, %age, VH, VW etc...) and absolute values (mm, px, in, cm, pt etc...)
  • A %age will either be:
  • ems are excellent units to use when building! As opposed to absolute units (such as pixels), ems will 'scale up' with the page if things are changed. With absolute units, we'd need to adjust nearly everything on the page, changing pixel values incalculable times! Keeping things relative with em is hugely beneficial!
  • rems are also very useful! They are measured relative to the root HTML element's font-size. While ems change based on the parent element's font-size, rems do NOT! If dealing with nested uls as an example, ems will cause a weird snowballing effect. REMS will keep things looking good consistent to the rest of the document
  • It's usually a bad idea to set a font-size in pixels anyway! It overrides the default settings of the browser. Finally, check out this link for more on ems and rems: Ems and Rems tutorial

    • Width and Height

  • The most basic to manipulate! The lorum ipsum in the three divs below will have 200px height and width dimensions, and be differentiated from the h3 element by assigning different color attributes to both
  • If you inspect the boxes above, you'll quickly see why they space out the way they do!

    • Border And Border Radius

  • Finally, there's a very important attribute/property called box-sizing. If box-sizing has been changed to border-box, then changing the width or height will set the width of the border area
  • As mentioned above, the width of the element will go from border to border! So, we specified that it's 200px wide? That means the width of the whole thing will be 200px, and the context box is 190px
  • In the 3 boxes below, look at the way shorthand is used!
  • Note how border radii can be manipulated to create circular borders too!
    • Box 1's CSS
                  
                #one {
                    background-color: #e5989b;
                    border-width: 5px;
                    /*Widening the border by 5px increases the width of the content (including border) by 10px*/
                    border-color: black;
                    border-style: solid;
                    /*box-sizing: border-box;*/ This is left out...but leaving it in would give the boxes a consistent size

                    margin-left:50px;
                    margin-bottom: 100px;
                }
    Box 2's CSS
                  
                #two {
                    background-color: #b5838d;
                    border-color: peachpuff;
                    border-width: 3px;
                    border-style: dashed;
                    border-left-color: blueviolet;

                    padding-right: 200px;
                    margin: 200px;
                }
    Box 3's CSS
                  
                #three {
                    background-color: #6d6875;
                    border: 4px solid black;
                    border-radius:50%   /*Using a percentage is an extremely common way to make circles!*/
                }
    Wait, we specified that a div be 200px wide? However, after adding border width of 5px, the whole thing will be 210px wide! To make this box 'fit' 200px of width, you need to include box-sizing: border-box;
    We're giving this a different color, a border width of 3px, and a new style In addition, the left side of the border is shown. However, what about border shorthand??? See the 3rd box!
    This uses some shorthand. You can reference the documentation on MDN to ensure your order is accurate! In the case of borders, we need to make sure that the thickness goes before style, and that before color. The border-radius at 50% accounts for the circle!!!

    Padding

  • We're demonstrating padding using 4 buttons below: 'Pad Me'
    • Four Kinds Of Padding (using shorthand)
                  
                button#padOne{
                    padding: 10px;
                }
                buttom#padTwo {
                    padding: 5px 10px;
                }
                button#padThree {
                    padding: 1px 2px 2px;
                }
                button#padFour {
                    padding: 5px 1px 0 2px;
                }
  • So, using 1 figure applies the value to each side
  • Using 2 figures applies the values to the vertical and horizontal
  • 3 Figures applies the values to the top, horizontal, then bottom
  • Finally, 4 figures goes clockwise: top right bottom left

    • Margin

  • Margin is the space on the outside of the border
  • The shorthand for margin is exactly the same as that for padding!
  • Certain elements, such as h1, get default margin. You can change this by resetting the margins to what you want
  • Many people remove the margin when creating a new webpage!. To do so, use body{margin:0;}
  • Look at the boxes/code above to see how margin changes affect things
  • Also, in the h1 header at the top, we styled the second 'the box' to have a margin. However, when we try to include a margin-top of 30px, nothing happens, due to a very important property known as display

    • Display

  • These h2 elements will show what we're doing:

    • I am h2

    I'm another h2!

  • Without changing things, the h2's color would initially go all the way across the page. Note how the h2 above is block, and the span below is include
    • I am a span I'm another span!
  • These h2s, however, have their display set to inline, and the spans their display set to block!

    • I am h2

    I'm another h2!

    I am a span I'm another span!
  • The section below shows 3 sets of block vs inline vs block-inline elements:
    • Block
    Block
    Block
    Inline
    Inline
    Inline
    Block-inline
    Block-inline
    Block-inline
  • display:none; would also have use (especially with Javascript)

    • CSS Units

  • In %ages, we must remember that any given %age is given relative to some other value. For example, width is 50% of the parent element. line-width is 50% of the width of the element itself! Whether the unit is relative to the PARENT or relative to the ELEMENT iself changes. Use MDN if in doubt!
    • Within this div, I adjusted the width to 70% and height to 20% of whatever the parent element is. This pink div is the child of the grey section! Inspect it!

    This is a h4 example!

  • In this case, I wanted to show how %age can be relative to the element itself! Here, font-size was set by me to be 40px. The line-height was adjusted to 200%, giving us the 80px line height!
    • div.unitEx { background-color: #e5989b; width: 50%; height: 50%; }
    h4 { font-size: 40px; border: 1px solid black; line-height:200%; /*The line-height would be 80px*/ }
  • To demonstrate em. Remember that with font-size, 1em equals the font-size of the parent. 2em = twice the parent's font-size etc...
  • With other properties, 1em equals the computed font-size of the element itself
  • Why are the three buttons on the page different sizes? Well, they all utilize em, and the dimensions stay consistent relative to the size of the parent element!
    • I am h5!

    In this example, the font-size of the <article> tag was given as 30px, while the font-size of the <h5> tag was 2em. Thus, because article is the parent element of h5 (and font-size in em is dependent on the parent element), the font size here will be 60px! I made the p 0.6ems! (18px)

    The button above was initially 30px, but this wouldn't scale up if need be. Therefore, I used ems instead, keeping it all relative!

    Try this on Opacity and alpha channels