HTML elements are represented as rectangular boxes. Each box has optional margin, border, and padding to visually separate its content from other elements’ content. Through CSS, you can manipulate each box area.
Explanation of the different box areas:
- Content—Area designated to display descendant elements like text, images, and blocks. Optionally, you can set the size of the content area by defining the width and height CSS properties. Otherwise, the content area will adjust to fit its content.
- Margin—Invisible surrounding area to keep separation with other boxes
- Padding—Invisible area between content and optional border area
- Border—Optional area to visually display box boundaries
Let’s Play with CSS
Now that we know all the theory there is, let’s jump into practice. Open Codepen and start playing with box properties until you get it. Don’t be afraid to mess it up—if you get lost, press the F5 key on your keyboard and Codepen will reload and appear how it did before you made edits on it.
If you didn’t get adventurous yet, try the following Codepen and go further by playing with border properties like border-radius or border-color and text properties like color or font-size. Hey! Don’t listen to me; go crazy and mess with all CSS properties you see. And if you want to dig further on a particular property, like CSS background, do a search on Google.
Press the F5 key on your keyboard to reload a web page.
