0

If I have a text input immediately below a label's text, is there a way to pad some space above the input and below the label, separating the two a few pixels?

When I add padding to the top of the input box's class, it stretches the box's bottom down, while leaving its top the same distance away from the label. Padding the bottom of the label hasn't had any effect. I checked the display styles on w3 to see if it was a problem with using display:block, but that didn't look like the issue.

Sorry for the newbish question, I'm new to HTML/css. I'll keep tinkering and will appreciate any help. Thanks!

The markup:

     <label for='subject'style='display:block' class='label'>
          What subject do you want to follow?<br>
       <input type="text" id="subject" value="meaningOfLife" style="display:block" class='form-text'><br>
     </label> 

And the css:

.label{
  padding:5px 10px 0px 10px;
  color: RGB(25,90,90);
  font-size: 16;
  font-weight: 8;
  font-family: 'Open Sans Condensed', sans-serif;    
}

1 Answer 1

3

Is it something you looking for? You can apply it to one single element by ID like this:

.label #subject {
     margin-top: 5px;
}

Or apply to all input elements nested inside label tag with form-text class name

.label .form-text {
    margin-top: 5px;
}

To apply margin to all input="text" elements nested inside label:

.label input[type="text"] {
    margin-top: 5px;
}
2
  • 1
    A brief explanation of why this works might be helpful here.
    – Paulie_D
    Apr 4, 2016 at 21:28
  • Great, thank you for the quick reply and the followup edit, that's exactly what I was looking for. Will accept when it unlocks. Apr 4, 2016 at 21:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.