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

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

<asp:Label I开发者_运维问答D="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?

---

You're rendering invalid html. Label controls put their contents inside a span or label html tag by default, so now when you put h1 tags inside the label you have a block element inside an inline element, which is invalid.

You should wrap your h1 tags outside the label control, and then perhaps use a literal control instead — like this:

<h1 class="LabelOne"><asp:Literal ID="Label2" runat="server">
    Hello world
</asp:Literal></h1>

Note that you could also easily apply inline styles to h1 if you wanted... not that I recommend inline styles, though.

---

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.

---

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

---

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.