Hi - is there a tool that will show all boxes as the browser is interpreting them on a page? So, you can see how boxes are positioned and even margins/paddings etc that are affecting the display?
Such a tool would be fricking awesome.
Brett
1 Like
In Firefox/Chrome, you can do Ctrl-Shift-I to open Developer Tools and have a look at Layout/Styles in the lower right, which shows you margin/paddings, if that is what you are looking for?
2 Likes
My trick is, I label them all with a primary background-color. So then I can see them move in codepen.
This
turned into this
But, I got all my containers in their spots with the first one. Good luck!
You can put this on top of your css style sheet:
- {
border: 0.5px solid red;
}
It’ll show a red line around all boxes on your page. It’s a useful little piece of code to help you while you’re still working on the layout.
It’s not perfect because the border itself will influence the size of the boxes. But it has helped me a lot.
And it’s easy to hide by changing it into a comment. It’s also something you can add to the developers screen to have a quick look at the boxes and the layout in an existing website.
2 Likes
This is what I do too. Really useful if something is going awry and you haven’t got a clue why.