Learning CSS Box Model Tip/Trick
So I’ve been meaning to write this for almost a year and just never got around to it. Since I’m trying to solidify what I have learned I plan to write more about my journey and experiences.
When I first started learning HTML and CSS, I would sometimes have trouble positioning an element where I wanted it to be. I mean, no matter what I did it just wouldn’t set in the right spot or would not move at all. That frustration always reminds me of that CSS gif you see with Peter Griffin pulling the two strings for blinds and have to do it 50 times before it would rise evenly. The CSS struggle is real.

After what it seems like hours trying to figure out why the element wouldn’t move, I would finally figure out which element’s properties, such as margin, padding, width, height, etc., was preventing the elements around it from moving. In some cases, it would be an element that is at the bottom of the page affecting an element at the top of the page or vice versa. The latter was the most frustrating situation because it would be something you wouldn’t expect to cause an issue.
I met up with a friend every couple of weeks at Starbucks to discuss what project we were working on, eCourse we were doing for front-end development or job interviews we did. Then one day on a sunny afternoon, the heavens parted during a coffee break at Starbucks with Jake. He had found a nice little trick on Quora, I think, for CSS that made finding issues so much easier.
This trick uses the background property to apply different colors to each HTML element’s margin and padding. Learning what was going on with my CSS became easier with the visual help. Below is the syntax I usually past at the bottom of my CSS from the get-go and comment out the syntax until I need it. If your not a fan of the colors I use, you can change them by changing the red, green, and blue for the RGBA. I hope this helps you on your Front-End Journey and don’t forget to like and share.
*{ background-color: rgba(255,0,0,0.3);}* * { background-color: rgba(0,255,0,0.3);}* * * { background-color: rgba(35,0,55,0.3);}* * * * { background-color: rgba(255,0,0,0.3);}* * * * * { background-color: rgba(0,33,255,0.3);}
