ASP.NET: I'm getting strange output when styling a Label control...

Question

.labelOne { border-width:thin;
            border-style:solid;
            border-color:Red;
            background-color:Silver; }

<asp:Label ID="Label1" runat="server" CssClass="labelOne">
    <h1>Hello world</h1>
</asp:Label>

<br /><br />

<asp:Label ID="Label2" runat="server"
           BorderColor="Black"
           BorderStyle="Solid"
           BorderWidth="1px"
           BackColor="Silver">
    <h1>Hello world</h1>
</asp:Label>

Hello. In the code sample above I have 2 Label controls with their contents set to an h1 header tag. The first Label is styled using css, and the second with the Label's inline properties (both Labels have identical styling). But the first Label doesn't output properly, it's border is broken. If I replace the first Label's markup with plain "Hello world" text it renders properly, but it breaks again when I use markup. Can someone explain why this is happening?

Answer 1

Add this to your CSS:

display:inline-block;

Apparently Asp.Net adds that css style for you when you use the inline styles on a label.

By the way, I was able to spot the difference between the styles applied to the 2 labels (span tags) very quickly by bringing it up in Firebug.

Answer 2

Label is the wrong control to be using here as it renders a html <label>, which defines a label for an input element. It would make more sense to use a Panel which will render as a <div>.

Answer 3

A span-element (which is what the asp:Label outputs) is an inline element, and can not contain block level elements like h1. This might be the reason why it breaks.