preview margins/borders/padding

[android272]

It would really be nice if the live preview would show the margins, borders, and padding of the selected code like Google chrome does when you inspect elements. the image below shows a selected element in blue that has a 15px padding on the right, bottom, and right sids shown in green, a 1px border shown in light tan, and a 15px top margin and a 500px right margin.

[peterflynn]

Related to #7255

[larz0]

How about this? Solid border for the box, dashed border for padding and blue tint for margin.

[android272]

I think that is much better. I did not really like the different colors of chrome, plus one of the most annoying parts of the brackets section box is that the content your trying to look at is covered by a blue box. I like the idea of keeping the selected content free of the transparent box.

[android272]

I think that is much better. I did not really like the different colors of chrome, plus one of the most annoying parts of the brackets section box is that the content your trying to look at is covered by a blue box. I like the idea of keeping the selected content free of the transparent box.

[larz0]

Ok cool. Glad you like it!

[larz0]

Reopening this issue since it hasn't been addressed yet (the design is ready).