Untitled Page

Forums

In my current Pen, http://codepen.io/Founts/pen/HmtGA, I’m having some trouble with the Label tag above the Select element in that it’s not applying CSS for the margin. Chrome sees the margin code but it’s not rendering. When I apply Display: Block (converting it from Display: Inline), the margin code is rendered correctly. Any help is appreciated.

I don’t see a label above the select element. I see one NEXT to it though (“Select a Choice”) but there is no margin for it defined?

Founts, If I’m correct the problem is after the breakpoint? I see you have a class on that problematic label. I applied that following styles on it’s class under @media(max-width:600px) and it fixed the spacing issue: form label.desc < display:table; clear:both; >Note: place that bit of code within @media(max-width:600px)

Senff: I left out the part where I needed to explain that the label moves to the top below the 600px breakpoint (media query). Martin: You were correct about the breakpoint. Changing the display to Table, like you mention, or Block, as I mentioned, resolves this quirk which is good. But I’m wondering why this is actually happening. Curious why you suggest display: table as well.

When margin or padding isn’t rendering, it’s usually because floats need to be cleared. display:table; clear: both; will clear those floats. Oftentimes it’s the reverse, if you add a float to an element, the padding or margin will suddenly appear. display:table;clear:both; will fix the issue regardless.

Источник

How to Align Labels Next to Inputs

When you create a web form, you’ll probably need to know how to align labels with inputs. Here, we’ll show how it’s possible to create right-aligned and left-aligned elements next to inputs.

Solutions with CSS properties

In our example below, we use three elements and place and elements within each of them. Note that we use a type attribute for each . We specify the margin-bottom of our element. Then, we set the display of the element to «inline-block» and give a fixed width. After that, set the text-align property to «right», and the labels will be aligned with the inputs on the right side.

Example of right aligning labels next to inputs with the text-align property:

html> html> head> title>Title of the document title> style> div < margin-bottom: 10px; > label < display: inline-block; width: 150px; text-align: right; > style> head> body> form action="/form/submit" method="post"> div> label>Short label> input type="text" /> div> div> label>Simple label label> input type="text" /> div> div> label>Label having more text label> input type="text" /> div> form> body> html>

Result

We can remove the text-align property, and the labels will be left-aligned by default. Let’s see an example, where we also add placeholder , id and name attributes on inputs and for attribute on labels. As a result, the input will be activated when a label is clicked.

Example of left aligning labels next to inputs:

html> html> head> title>Title of the document title> style> div < margin-bottom: 10px; > label < display: inline-block; width: 150px; > style> head> body> form action="/form/submit" method="post"> div> label for="name">Name label> input type="text" id="name" placeholder="Enter your name" /> div> div> label for="age">Your Age label> input type="text" id="age" name="age" placeholder="Enter your age" /> div> div> label for="country">Enter Your Country label> input type="text" id="country" name="country" placeholder="Country" /> div> input type="submit" value="Submit" /> form> body> html>

In our next example too, we’ll left-align the labels. Here, we also make the inline-block and give a fixed width. For the element, we add padding.

Example of left aligning labels next to inputs:

html> html> head> title>Title of the document title> style> div < margin-bottom: 10px; > label < display: inline-block; width: 110px; color: #777777; > input < padding: 5px 10px; > style> head> body> form action="/form/submit" method="post"> div> label for="name">Your name: label> input id="name" name="username" type="text" autofocus /> div> div> label for="lastname">Your Last name: label> input id="lastname" name="lastname" type="text" /> div> input type="submit" value="Submit" /> form> body> html>

Regarding the inclusion of input tags in label tags, this can be useful for accessibility purposes as it helps screen readers associate the label with the input field. However, it’s not strictly necessary and can add unnecessary markup to the HTML. It’s generally up to the designer or developer to decide whether to include input tags in label tags based on their specific needs and preferences.

Источник

Html label margin bottom

Answered by:

Question

User2138367005 posted
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?

Answers

User1571885900 posted
Hi, ‘Label’ generates tag. the 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

All replies

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

User-1696528411 posted
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.

User2138367005 posted
Hi, here is a snippet with which I was experimenting on label margins.

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

User-1696528411 posted
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.

User2138367005 posted
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

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

User1571885900 posted
Hi, ‘Label’ generates tag. the 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

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.

User2138367005 posted
@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!

Dev centers

Learning resources

Community

Support

Programs

© 2023 Microsoft

Источник