4/25/19 - Box Model Lecture Notes

gistfile1.txt

/* The Box Model */
.box {
  background-color: aqua;
  width: 400px;
  /*  TRBL  */
  padding: 75px;
/*   padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px; */
  
  /*  size, type, color  */
  border: 15px solid salmon;
  
  /*  Margin TRBL */
  margin: 75px;
  
  /*  Removes the element from the flow of the page  */
  display: none;
  /*  
    Takes up horizontal space
    Introduces a page break
    respects the box model completely
  */
  display: block;
  /*  
    Takes up the horizontal space of it's content only
  content flows around them nicely
  respects the horizontal aspets of the box model but not the top and bottom
  */
/*   display: inline; */
  
  /*  
    Takes upt he hotizontal space of it's content only
    Content flows around them nicely
    Respects the box model completely
    no page break
  */
  display: inline-block;
}