4

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.org/TR/CSS2/box.html

enter image description here

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Steve H
  • 879
  • 4
  • 13
  • 18
  • 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 Jun 03 '13 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 Jun 03 '13 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 Jun 03 '13 at 12:12

3 Answers3

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!

Brett Merrifield
  • 2,220
  • 6
  • 22
  • 21
  • Thanks ! I got it. I see it now. It would have more useful if this box model shown there will actually display inside the browser on the element that one points to with the mouse. But this is exactly the idea I was thinking of. It just needs to be more user friendly to use. – Steve H Jun 03 '13 at 12:15
  • @SteveH CDT does that, but you have to point to the element in the "Element" tab at the bottom. I think Firefox does too. User friendly is subjective. – crush Jun 03 '13 at 12:15
  • 1
    I feel that there is a "3d cube" button even in Chrome but where? – Hartmut Pfarr Nov 12 '14 at 15:49
  • These days, the 3d cube is not enabled by default in Firefox (42), and has to be enabled via "Toolbox Options" (gear icon in when inspector is open), the entry is called "3D View", and then the 3d cube is shown at the top bar of the toolbox. – sdaau Nov 24 '15 at 23:03
  • 1
    From Firefox 47 onwards, [3D view is no longer available](https://developer.mozilla.org/en/docs/Tools/3D_View). – Chad Nouis Feb 15 '17 at 18:27
1

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.com/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.

Jay Dansand
  • 789
  • 1
  • 9
  • 13
  • Of course, if there is no border, though, then you wouldn't see it in the box model anyways. – crush Jun 03 '13 at 12:13
  • 1
    "but that information is displayed in a separate panel, not on the actual page." Not true. CDT shows it directly on the page with translucent overlays. – crush Jun 03 '13 at 12:14
  • True, while you're hovering it or selecting it in the Elements tab (as does Firebug). Not the pixel values for each component of the model, though (just the total content width/heights). I'll amend my answer. Thanks! – Jay Dansand Jun 03 '13 at 12:16
  • I guess it assumes that you can make the calculations yourself since the CSS is right there as well. If you know the total width, and subtract the margin, then you know how big everything but the margin is. If you subtract the margin + border, then you know how everything including the content and padding is. etc. – crush Jun 03 '13 at 12:17
  • Unless they're using box-sizing: border-box. :) – Jay Dansand Jun 03 '13 at 12:18
  • At some point, responsibility has to fall on the developer for understanding how their code works. – crush Jun 03 '13 at 12:19
0

For anyone else here after Firefox 3d view has been removed, checkout this browser extension: https://chrispederick.com/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.com/a/41555966/15612685!

Andrew Luchuk
  • 1