I find working with the box model hard, since I am trying to change values for spaces and areas I can't actually see on the screen.

.html

Is there a way or an option to display these boundaries around an element in a web page, which can be useful during debugging or as one is trying to adjust things correctly?

May be a smart Javascript function that can be used for this?

These can be drawn using some thin lines of some color. Even if one can highlight just the border edge, that will help. An example using this would be <IMG src="image.jpg" style="show_box_grid_lines:true" /> . It will be useful to have an option to see the area this object occupies in the screen by being able to see the actual borders that it uses.

Is something like possible or exist today?

I find working with the box model hard, since I am trying to change values for spaces and areas I can't actually see on the screen.

http://www.w3/TR/CSS2/box.html

Is there a way or an option to display these boundaries around an element in a web page, which can be useful during debugging or as one is trying to adjust things correctly?

May be a smart Javascript function that can be used for this?

These can be drawn using some thin lines of some color. Even if one can highlight just the border edge, that will help. An example using this would be <IMG src="image.jpg" style="show_box_grid_lines:true" /> . It will be useful to have an option to see the area this object occupies in the screen by being able to see the actual borders that it uses.

Is something like possible or exist today?

• javascript
• html
• css

• 1 Set border: 1px solid red or something like that? Chrome Developer Tools does a good job as well of showing you the space an element occupies. – crush Commented Jun 3, 2013 at 12:07
• @crush I see 4 areas around the content in the CSS model. Which one of these will the above represent? I am thinking of some option that I can turn on/off just for debugging and not something that will affect that actual final layout. I will look at Chrome developer tools if it does show these boundaries. That will be good. – Steve H Commented Jun 3, 2013 at 12:10
• Chrome's Developer Tools does that. It gives you a lot of information. Right click on something on the page, and go to "inspect element" Any element you hover in the developer tools will show the box model that it occupies (if that portion of the box is occupying space) – crush Commented Jun 3, 2013 at 12:12

3 Answers 3

1.) Download the latest version of firefox.

2.) Right click anywhere on a page > Inspect Element.

3.) Click on the 3d cube button on the bottom right.

This will show every element on the page stacked on top of eachother. You can select specific elements and see their respected widths and heights. There are a lot more tools you can use with Firefox's inspector. Check it out!

You can't directly show each set of calculation lines (on the actual page), but using the outline style will not affect layout (it takes no space in the layout; borders do take up space and will affect layout). Outline will draw a line around the entirety of the content box.

http://www.w3schools./css/css_outline.asp

You can of course use Chrome/IE's developer tools, or Firebug for Firefox, to see a box model representation and effective pixel values; the pixel values are displayed in the tool's pane, and the margin and content area are shown as semi-opaque boxes around the content while hovering/selecting the element in the tool's pane.

Sometimes I need to see the boxes of everything, which is when I use outline styles.

For anyone else here after Firefox 3d view has been removed, checkout this browser extension: https://chrispederick./work/web-developer/. It supports Chrome, Firefox, and Opera and it can display borders around all the elements on a page.

Thanks to this helpful answer for linking to the extension: https://stackoverflow./a/41555966/15612685!