Spacing form elements with css - css

Question

I am looking for a neat way to space my form elements but i am not so sure how to do it.
Currently,i am using the ordinary <br/> to space but i wonder if there was a better way of doing this using class or id
<form>
Message: <input type="text" class="msg" name="message" /><br/><br/>
<input type="submit" class="c-add" value="Add" />
<input type="submit" class="c-update" value="Update" />
</form>
I am thinking of
.c-add + .c-update{
margin-right:100px;
}
but that's not valid css.What would be the solution?

Answer 1

.c-add + .c-update is a valid CSS selector. It selects all elements with the "c-update" class that follow immediately an element with the "c-add" class. Example: DEMO (CSS Selector Reference)
Solution
You can seperate multiple selectors with a comma. You do not need to give each input a unique class name. That's only necessary if you want to style them uniquely. Since you did not provide information on how the expected result should look like, i made a demo with different solutions:
DEMO
HTML markup:
<form class="form">
<label>Message:</label><input type="text" class="msg" name="message" />
<input type="submit" class="add" value="Add" />
<input type="submit" class="update" value="Update" />
</form>
Note that i wrapped "Message" with label, which is better markup.
CSS to make a one-row inline form:
.form input {
margin-right: 0.5em;
}
.form label {
float: left;
margin-right: 0.5em;
}
CSS to make a multiple-row form:
.form input {
display: block;
margin-bottom: 1em;
}
.form label {
float: left;
margin-right: 0.5em;
}
​You can mix both approaches by using specific classes for each input element or type.

Answer 2

Use a comma to separate selectors.
.c-add, .c-update {

Answer 3

The structure, perhaps this way:
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<ul>
<li>
<label>
<span>Name</span>
<input type="text" name="name" />
<small class="errorText"><?php echo ($_POST["name"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Email</span>
<input type="text" name="email" />
<small class="errorText"><?php echo ($_POST["email"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Subject</span>
<input type="text" name="subject" />
<small class="errorText"><?php echo ($_POST["subject"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Message</span>
<textarea name="message" cols="80" rows="7"></textarea>
<small class="errorText"><?php echo ($_POST["message"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<input type="submit" name="submit" value="Send" />
</li>
</ul>
</form>
And the CSS for the same:
* {font-family: Segoe UI, Tahoma;}
h1 {font-weight: bold; font-size: 14pt; padding: 5px 0; margin: 5px 0; border: 1px solid #999; border-width: 1px 0;}
input[type='submit'] {padding: 5px 20px; cursor: pointer;}
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul li {padding: 5px 0;}
ul li label span {display: block; cursor: pointer;}
ul li label .errorText {color: #f00; font-weight: bold; vertical-align: top;}
ul li label textarea {width: 300px;}
You can see a live demo here: Demo