So if I have a HTML heading like this
<h2>A Heading</h2>
and I run Edit -> Format Document
it ends up looking like this
<h2>
A Heading</h2>
why is this? It doesn't do it to other block elements, but it does do it to other inline elements (eg <label>
).
Update: To clarify, I mean why is this the default, not where are the settings to change this
It does it because those are its default settings. In older browsers, sometimes having the end tag of a block or inline element on a new line after the child element (effectively leaving whitespace, such as a non-breaking space or empty text node) affects how the page is rendered. I have had trouble with this before. For example, the following can have issues rendering correctly if your anchors have borders or padding:
Sometimes there would be additional spacing at the bottom of the link. Changing it to the following removes the additional spacing:
Basically, the goofy formatting solves some rendering issues in browsers with shoddy CSS support like IE6. If you have IE6, look at this JSFiddle I created to illustrate the issue. There's extra spacing at the bottom of the image where the anchor tags exist on their own lines.
From Scott Guthrie's blog:
So as ugly as the formatting or output from the designer in Visual Studio can be, it is more likely to work in more browsers than would properly formatted markup (such as XHTML).
To change the defaults for the formatting in Visual Studio, go to:
Under "Default Settings", change the "Line Breaks" option to "Before and After" for both the Client and the Server "tag supports contents" options.