Hands On With the CSS Box Model

CSS Box Model

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

View Infographic

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.

View Infographic

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s