DEV Community

Cover image for Understanding The Box Model in CSS

Understanding The Box Model in CSS

Mohamed Yamani on November 06, 2021

Table of content Introduction What's the box model? Types of boxes Box sizing Bonus tip Conclusion Introduction When you'r...
Collapse
 
stephanie profile image
Stephanie Handsteiner • Edited

Well, this is a little audacious.

There's nothing wrong with seeing a talk and writing a blog post about it afterwards to solidify your newly gained knowledge, but at least mention where you got that knowledge from.

Just in case you forgot the talk, it's This box will change your life given by @whitep4nth3r at CodeLand this year.

Collapse
 
yamanidev profile image
Mohamed Yamani

That is very bold of you to assume.

I have never encountered that article before.

Collapse
 
murkrage profile image
Mike Ekkel

What are the similarities here? Just trying to understand if it's indeed been copied.

Collapse
 
stephanie profile image
Stephanie Handsteiner • Edited

Albeit not copied word by word, it's stylistically very much similar, up to the point where he gives the exact same »debugging tip« (with the border: 1px solid red;) as she does in hers.

e.g. the TL;DR's:

His:

TLDR; every website is a bunch of rectangular boxes nested inside other rectangular boxes. Boxes everywhere.

Hers:

This is a box. This is another box. Here are some more boxes. Here are some tiny boxes. Here are some more boxes. Let's add some more boxes. And as you see this evolve, you might start to realize that it's starting to look incredibly like the layout of a webpage. And these are the boxes we're going to be talking about today.

Just a little too much coincidence, that an article in a similar style pops up about a month after CodeLand 2021. ¯\_(ツ)_/¯

Thread Thread
 
yamanidev profile image
Mohamed Yamani

This is actually funny, whatever I say wouldn't be believed given the similarities lol. Which is understandable.

I can't prove to you that this is the first time I hear of CodeLand, or that article you mentioned. But I will say it again, my article was not copied.

Collapse
 
dejoie profile image
dejoie

Very well explained. Thanks for this

Collapse
 
yamanidev profile image
Mohamed Yamani

Thank you very much! It's my pleasure

Collapse
 
joomlaserbia profile image
Momir Despotović

For debbuging use outline vs border

Collapse
 
yamanidev profile image
Mohamed Yamani

What do you mean?

Collapse
 
paulnthompson84 profile image
Paul Thompson

outline: 1px solid red;

Outline is independent of the box model, so doesn't use any space.

Thread Thread
 
yamanidev profile image
Mohamed Yamani • Edited

Ohhhh that's right! I don't know how I never thought of using outline before. Thank you so much!!

I guess I never noticed the difference in layout when 1px is added in the border lol

Collapse
 
godwinkachi profile image
Godwin 'Kachi

Very well explained. Thanks for sharing

Collapse
 
yamanidev profile image
Mohamed Yamani

It's my pleasure! Thanks for reading <3

Collapse
 
dynamo0077 profile image
Rishi Choubey

Thanks, nicely explained !

Collapse
 
yamanidev profile image
Mohamed Yamani

My pleasure <3

Collapse
 
yamanidev profile image
Mohamed Yamani

Every new technology is a challenge at first, just take it easy and it will get easier with time my friend