why I'm getting this behaviour?
Targeting all labels with this in css
label{margin-bottom:.5em} affects only the first two labels(first & last name) and ignores the email label, why it happens
my html goes like:
<form>
<div class="first-row">
<div class="field">
<label for="firstname">First Name <sup>*</sup</label>
<input type="text" id="firstname" name="firstname">
</div>
<div class="field">
<label for="lasttname">Last Name <sup>*</sup </label>
<input type="text" id="lasttname" name="lasttname">
</div>
</div>
<label for="email">Email Adress <sup>*</sup></label>
<input type="email" name="email" id="email" />
</form>
29 Replies
you forgot to properly close the
<sup> tag
you have </sup</label>
if that doesn't fix it, please make a minimal repeatable example of your issue in a codepen or in jsfiddleoops I made that erros while was making this post
ok Imma make a sample
alright, because what's in the post isn't enough to make any conclusion
JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
yep got u
first time I try this hahah pretty awesome tool
i don't see anything wrong, but, it's a shared session and i can't do much on it
you can save it and share the link instead (you can delete later, if needed)
on it
Create a contact form with input fields - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
check now
your labels outside
.field have display: inline because .field has display: flexhmmm I didn't get it what has display to do with margin to affect it
the quick solution is to get rid of the
display: flex in the .fieldinline elements don't have fixed width, height and can't have margins or paddings
and many more things
can't cuz that's I need those two divs to be in one line
I will wrap the email in a div
how about this:
- remove the
flex from .field - it doesn't do anything
- add display: block to the label inside .fieldIm aware of that
then you can wrap the loose
<label> in a <div class="field">
(label and field)1 yeah yeah you are right it was just filling space there lol removed it
still looking nice
it was literally just making your code longer
awesome worked
told you
you da maaan
if the parent is
display: flex, the children are flex items, so margin should work on them. Flex items aren't inline, or block, though they behave basically like block elelents.
I think that's why it was working on the first two, and not the last one, which wasn't in a .field.
The adding of display: block to the label definitely was the way to go though 🙂Yeah that was the fix
Ty for hoping in kev
i checked the console and it was showing "display: block"
that is why i said what i said
and yes, that is why it wasn't working: the label outside the flex parent was still
display: inline