Found a cheat code for debugging CSS with my browser's dev tools that saved me hours

I've been learning HTML and CSS for about 2 months and kept running into issues where my layout looked totally different from what I expected. Spent a whole Sunday trying to figure out why a div was floating to the left when I wanted it centered. Eventually I watched a YouTube video from a guy teaching web dev and he showed how to right click on the page, hit inspect, and then toggle the box model view. Turns out my padding was pushing the element way over because I forgot to set box-sizing to border-box. Once I changed that in the dev tools it instantly fixed everything and I just copied the code. Has anyone else found a specific dev tool feature that made something click for you?

1 comments

1 Comment

anna_green486d ago

Oh man, the box-sizing thing got me too. I spent like two hours trying to center a button and it kept hanging off the side of the screen. Once I finally used the dev tools to see the box model, I realized my padding was eating the whole width. Literally just set it to border-box and everything snapped into place.