* {
    border: 1px solid black;
    margin: 5px;
    background-color: aliceblue;
}

h1 {
    color: red;
}

div {
    background-color: white;
}

/* Every element has a default display:  block,  inline, inline block
    
    However, we can change the display for any element. 
    */


/* Let's add height and width to our paragraph one.  Ok, that works like we would expect.  What if we change display to inline? Inline block?  Let's chat about this*/
#one {
    /* height: 100px;
        width: 80%;  */

    /* display: inline; */
}

/*What if we mess around with our span?*/
span {
    /* height: 200px; */
    /* width: 50%; */
    /* display: block; */
    /* margin: auto; */
}


/* Let's change the height and width of img.  It shouldn't make any difference since it is inline, right?  uh oh.... */

/* The <img> element has a default display value of inline. However, it is also a "replaced element," meaning its appearance and dimensions are defined by an external resource (the image file itself). This gives <img> elements certain characteristics that are similar to inline-block elements, such as the ability to set width, height, padding, and margin. */

button {
    /* width: 50px; */
    /* height:100px; */
}

#three {
    /* height: 400px; */
    /* margin: 50px; */
    /* margin: auto; */
    /* hmmm auto isn't working...how can we fix that? */
    /* display: block; */

    /* What if we want to hide our img? */
    /* display: none; */
    /* visibility:hidden; */

    /* hmmm...what is the difference? */
    /* Sometimes there are many ways to do the same thing */
    /* opacity: 0; */
}


/* One last thing... */
#six {
    display: none;
    /* visibility: hidden; */
    background-color: aqua;
    height: 300px;

    /* min-height: 300px; */
    /* The container will grow to fit its contents but will never shrink to less than 500px */


    /*what if we set the height to 300px;*/
    /* height: 300px; */
    /* Huh...our paragraph is sticking overflowing out of our div (we may need to shrink the viewport to see this) overflow to the rescue!*/
    /* overflow:hidden; */
}

#seven {
    /* float:left; */
    /* margin: 10px; */
    /* border: none; */
}