Share via

margin-top doesn't work on asp:label

Question

Wednesday, July 1, 2009 5:42 AM

Hi,

I'm a little bit confused why margin-top/bottom doesn't work on labels although margin-left/right does.

I searched at google but didn't find anything useful. Does anybody know the reason why top and bottom margin don't work and maybe a fix?

Cheers

Simon

All replies (12)

Thursday, July 2, 2009 8:22 AM âś…Answered

Hi,

'Label' generates <span> tag. the <span> tag without 'display:block' does not set margin style. if you want see change in your existing code, add BorderStyle="solid" to you labes**.** you will find that 'margin' style works. BorderStyle="solid" generats display:inline-block; style.

so change your css class to

.Label1      
    {           
    margin-top: 20px;       
    display:inline-block;
    }       
    .Label2     
    {           
    margin-top: 20px;       
    display:inline-block;
    }       
    .Label3     
    {           
    margin-top: 20px;       
    display:inline-block;
    }

it will work.

Wednesday, July 1, 2009 6:06 AM

Hi,

check that it is deriving margin-top and bottom from its parent control or any css class is assigned to it which has this style assigned.

how you are assigning margin-top or bottom to the label?

Please, post the code. so people can solve your problem.

Wednesday, July 1, 2009 6:32 AM

martin-top/bottom on inline elements does not apply.

Label server control render itself in most cases as span tag i.e. inline element.

Further information might be found on the CSS specification.

Wednesday, July 1, 2009 7:38 AM

Hi,

here is a snippet with which I was experimenting on label margins.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Untitled Page</title>
   <style type="text/css">
        .panel1
        {
          float: left;
           text-align: right;
         border: solid 1px black;
       }
      .Label1
        {
          margin-top: 20px;
      }
      .Label2
        {
          margin-top: 20px;
      }
      .Label3
        {
          margin-top: 20px;
      }
  </style>
</head>
<body>
  <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
   </asp:ScriptManager>
 <asp:Panel ID="Panel1" runat="server" CssClass="panel1">
       <asp:Label ID="Label1" runat="server" Text="Label" CssClass="Label1"></asp:Label>
      <br />
       <asp:Label ID="Label2" runat="server" Text="Label" CssClass="Label2"></asp:Label>
      <br />
       <asp:Label ID="Label3" runat="server" Text="Label" CssClass="Label3"></asp:Label>
  </asp:Panel>
 </form>
</body>
</html>

If margin-top/bottom doesn't work with inline elements, is it anyhow possible to achieve something like a top/bottom margin on a label?

Simon

Wednesday, July 1, 2009 8:02 AM

You can set "display:block" to your label(inline element will be converted to block element), then all block element's rules will be applied to the label.

Wednesday, July 1, 2009 8:23 AM

Thanks, it works.

Thursday, July 2, 2009 7:20 AM

I'm afraid I cheered to soon

I just checked my page in the internet explorer 7 and to me it seems that it's ignoring the "display: block" property, as the "margin-top" values are being ignored.

I searched on google about this but didn't find anything neither a solution nor a hint that this is a known bug.

Is there something I can do about?

Simon

Thursday, July 2, 2009 7:28 AM

I'm afraid I cheered to soon

I just checked my page in the internet explorer 7 and to me it seems that it's ignoring the "display: block" property, as the "margin-top" values are being ignored.

I searched on google about this but didn't find anything neither a solution nor a hint that this is a known bug.

Is there something I can do about?

Simon

 

That is not a bug, it is according to CSS specifications. Try this:

<div style="border:solid 1px black; margin-top:20px; margin-bottom:20px;">
      <asp:Label id="Label1" runat="server">Label Content</asp:Label>
</div>

NC...

Thursday, July 2, 2009 7:56 AM

Label is rendered as span which does not support margin.

Thursday, July 2, 2009 8:05 AM

Label is rendered as span which does not support margin.

 

Hasn't that already been posted multiple times on this thread?

NC...

 

Thursday, July 2, 2009 10:24 AM

That is not a bug, it is according to CSS specifications. Try this:

<div style="border:solid 1px black; margin-top:20px; margin-bottom:20px;">
      <asp:Label id="Label1" runat="server">Label Content</asp:Label>
</div>

NC...

Ok, the good news, now I have margins in the iexplorer, the bad news are while everything gets drawn fine in the explorer the gaps between the elements in firefox are now too big.

Explorer:

Firefox:

I'm beginning to seriously think about different styles for firefox and iexplorer. Anything else seems even more tedious.

Friday, July 3, 2009 3:02 AM

@paaresh

Damn, I saw your post only now. display:inline-block really helped me out, now it looks the same both in the iexplorer and firefox. Thanks!

  • Last updated on