Divs and CSS

[KRett]

This should be really simple but I for whatever reason I can't figure it out. All I want to do is space out my text boxes just a little bit.

HTML part

<div id="Norm" class="input" style="padding:10px;">
			First Name:
			<input name="fname" type="text" id="fname" /><br>
			Last Name:
			<input name="lname" type="text" id="lname" />
		</div>

CSS part

.input{ padding-bottom:20px; }

[PicnicTutorials]

You need to use margin instead. You may have to float them, inline-block them, or block them for the margin to take. I don't remember.

[KRett]

Just tried all of your suggestions and nothing changed. Any other ideas?

.input {
float:left;
margin:20px;
display:inline; (also tried block)
}

[PicnicTutorials]

input not .input

[kohoutek]

You have added those styles to the .input class, you need to, however, apply it to your actual inputs which do not have the .input class. So, either make it .input input or add the class to the input elements rather than to the div.

[KRett]

Both of your suggestions worked, thank you.

[Michael Morris]

Few things.
First, inline CSS is evil. Don't use it without good reason. Good reason is very, very rare - and this isn't one of them. In your code here the 'padding-bottom' call in your css gets pre-empted by the inline style. If you hadn't had the inline style there you would have noticed the padding changing on the div as you adjusted it and that in turn would have made the lack of change on the input elements that much less mysterious.

Second, class element names have a lot of landmine potential for the reasons you saw when you got your answer. It's just too easy to miss that period when reading the css sheet. That said, if you are writing your sheet to work without an html5shiv then using html5 semantic tags as class names is acceptable, even desirable. For example <div class="header"> instead of <header> Just don't mix and match these approaches - either used classes for the html semantic elements, or directly use the html5 semantics.

Third, use the label tag. <label for="fname">First Name/label> The for attribute of label ties the label to the input it labels - the benefit of this is clicking on the label places focus on the input element. While this isn't especially useful for text inputs, it makes radio and checkbox input much more user friendly, ESPECIALLY on mobile devices.