preview margins/borders/padding

[core-ai-bot]

Issue by android272
Thursday Mar 20, 2014 at 23:48 GMT
Originally opened as adobe/brackets#7276

---

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.

[core-ai-bot]

Comment by peterflynn
Thursday Mar 20, 2014 at 23:55 GMT

---

Related to #7255

[core-ai-bot]

Comment by larz0
Friday Mar 21, 2014 at 04:40 GMT

---

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

[core-ai-bot]

Comment by android272
Friday Mar 21, 2014 at 20:57 GMT

---

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.

[core-ai-bot]

Comment by android272
Friday Mar 21, 2014 at 20:58 GMT

---

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.

[core-ai-bot]

Comment by larz0
Friday Mar 21, 2014 at 21:02 GMT

---

Ok cool. Glad you like it!

[core-ai-bot]

Comment by larz0
Friday Mar 21, 2014 at 21:05 GMT

---

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