Move the Emoji

A great deal of layout is taken care of by manipulating the size and position of elements. A div is the most common and most flexible element, and is used everywhere to make layouts happen.

Goal

• Make four divs
• Place text inside and use padding to push the text away from the border.
• Experiment with different amounts of padding and margin

Example

Example on codepen:https://codepen.io/joe_bacal/pen/xLbmbm

Clues

Tags and properties you will need

<div>
padding
padding-left, padding-right, padding-top, padding-bottom
margin...

Imagine a div is a cardboard shipping box:

• The border is the cardboard
• The padding is the packing material
• Whatever content or elements are in the box are inside the padding
• The margin is the space between boxes