Box Model


In addition to a height and width, each HTML element has a margin (space around itself), a border (line around itself), and padding (space between the border and the contents):

Screen Shot 2016-07-25 at 6.32.06 PM

You can see (and edit) the box model of any HTML object in Chrome by right clicking on it and selecting "Inspect":

Then, in the developer toolbar, select the "Computed" tab:

You can double click any of these values to change them.


border

borders are really fun:

div{
  border: 1px solid black;
}
I can't get enough tacos.
div{
  border: 10px dotted rgb(100, 200, 50);
}
I can't get enough tacos.

If you want a different border on some sides, use -top, -right, -bottom, and -left suffixes:

div{
  border-top: 10px dashed blue;
  border-right: 10px solid red;
  border-bottom: 10px dotted green;
  border-left: 10px double yellow;
}
I can't get enough tacos.

width and height

width and height are exactly what they sound like:

div{
  border: 1px solid black;
  width: 100px;
  height: 200px;
}
I can't get enough tacos

You can define them in units of px, em, % (percent of the containing element), rem, vh (percent of the window height), and vw (percent of the window width). Of these, you'll most likely use % the most:

div{
  border: 1px solid black;
  width: 100%;
}
I can't get enough tacos

padding

To get more space on the inside, use padding:

div{
  border: 1px solid black;
  padding: 50px;
}
I can't get enough tacos.

If you want different padding on each side, use -top, -right, -bottom, and -left suffixes:

div{
  border: 1px solid black;
  background-color: rgb(200, 255, 255);
  padding-top: 25px;
  padding-left: 50px;
  padding-bottom: 75px;
  padding-right: 100px;
}
I can't get enough tacos. Nor sir. Me and tacos are like a fat kid and cake.

margin

To get more space on the outside, use margin:

div{
  border: 1px solid black;
  margin: 50px;
}
I can't get enough tacos.

If you want a different margin on each side, use -top, -right, -bottom, and -left suffixes:

div{
  border: 1px solid black;
  margin-top: 25px;
  margin-right: 50px;
  margin-bottom: 75px;
  margin-left: 100px;
}
I can't get enough tacos.

padding and margin Shorthand

padding and margin have a shorthand to make it easier to give each side a value. This:

div{
  padding-top: 25px;
  padding-right: 50px;
  padding-bottom: 75px;
  padding-left: 100px;
  margin-top: 25px;
  margin-right: 50px;
  margin-bottom: 75px;
  margin-left: 100px;
}

is the same as this:

div{
  padding: 25px 50px 75px 100px;
  margin:  25px 50px 75px 100px;
}

References


Challenge

Using only divs and CSS, draw a face.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.