Everything is a Box When I first started web development, it was the above concept that really helped me to understand what was going on. Every div, image, and paragraph, etc.. are all boxes. Each of these boxes has the same attributes that can be altered to change how they are displayed. From outermost to innermost, these attributes are margin, border, padding, and lastly your content. Below is a graphic that demonstrates this. Margin Margin is very helpful to create space on the outside of a box. It is transparent and therefore meant to structure and space out your boxes without changing the inner content. Border The border is typically used to outline the padding and content. It doesn't have to be visible, but it can be if given a color. Defining the radius will also round edges of the visible content. Padding Padding is also transparent and is used for spacing like margin. However, the important distinction between the two is that padding creates space directly around the content. If for instance, the content was a picture, more padding would actually shrink the image. It does not expand the total size of the box, whereas margin does. Tips and Advice If you are having a difficult time visualizing what is going on, don't worry because it's perfectly normal! The most helpful resource to help you learn are the development tools that are built into every major browser. How to use Google Chrome development tools: 1. Open chrome and find a website you want to inspect. 2. Now, either right-click and choose the inspect option, or hit F12. 3. You should notice a side panel pop up to the right. Inspect the webpage content and you will see the box model layers surrounding the content. 4. Now the fun of breaking things begins. On the right panel you can change one of the box model attributes you just learned about! Ex. Change padding from 20px to 40px. Reload the page when needed. Have fun, good luck learning, and happy coding! Also published on Hashnode

Google

9 Tips and Best Practices for HTML 5 

A Quick Introduction to Jamstack 

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Intro Guide to CSS: Explore Your Box

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

9 Tips and Best Practices for HTML 5

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

9 Tips and Best Practices for HTML 5

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps