* {
    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.25;
}


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

    /* 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:scroll;
}

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