Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

set margin for forms

Hi all, I am trying to create a new forms by myself, but I don't know why I can't set the margin. I have seperated all the input "text" to id, but I don't know why when I set the margin they will move together. May I know what I did wrong?

Thanks,

My HTML and CSS code are follow:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Contact Us</title>
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<form action="index.html" method="post">
<h1 id="contact">Contact US</h1>
<input type="text" id="first_name" name="user_first_name">
<input type="text" id="last_name" name="user_Last_name">
<input type="text" id="email" name="user_email">
<input type="text" id="street_name" name="street_name">
<input type="text" id="city" name="city">
<input type="text" id="province" name="province">
<input type="text" id="postal_code" name="postal_code">
</body>
</html>
body {background-color: lightblue;}
#contact {text-align: center;}
#first_name {margin-top: 50px;margin-right: 100px;font size:20px;}
#last_name {margin-top: 0px;font-size: 20px;}
#email {margin-top: 0px;font-size: 25px;}
#street_name {margin: 0px;font-size: 20px;}
#city {margin: 0px;font: 25px;}
#province {margin: 0px;font-size: 20px;}
#postal_code {margin-top: 300px;font-size: 20px;}

Hey Edwin,

Can you please reformat your code and then post a comment when you've done that? It's fairly illegible right now. You can follow this guideline to do so:

code

Tim Holley
Tim Holley
8,464 Points

Can you post the css as well so we can see how you attempted this?

1 Answer

First up, you're missing the closing form tag in your HTML. It won't really affect how your CSS styles make the page look, but it should really be in there.

Second, all of those input elements are inline by default. That is, they flow like normal text.

Are you wanting them to each be on their own line, with margins to separate the fields? If so, then each of those inputs needs to have the CSS property and value of display: block.

Ideally, you wouldn't style using an ID for every single element, as this will be difficult to maintain in future. Try giving the parent form tag a class and then styling all text inputs that are descendants:

<form action="index.html" method="post" class="contact">
...
</form>
.contact input[type="text"] {
  display: block;
  margin-top: 50px;
}

Alternatively, you can group inputs that are styled the same using classes in your HTML:

<input type="text" id="first_name" name="user_first_name" class="font-size-medium">
<input type="text" id="last_name" name="user_last_name" class="font-size-medium">
<input type="text" id="email" name="user_email" class="font-size-large">
<input type="text" id="street_name" name="street_name" class="font-size-medium">
<input type="text" id="city" name="city" class="font-size-large">
<input type="text" id="province" name="province" class="font-size-medium">
<input type="text" id="postal_code" name="postal_code" class="font-size-medium">
.font-size-medium {
  font-size: 20px;
}
.font-size-large {
  font-size: 25px;
}

If I've misunderstood how you would like to format your inputs, please either try and explain exactly how you would like it to appear, or perhaps try create and share a basic diagram somewhere (Google Drawings on Google Drive/Docs or something?).

Hi Lain, that really useful, thank you for your help....

Hi Lain, May I know how you copy and paste the codes likely? I am using sublime text 2

Hi Edwin Chau, my name is actually iain (no L ! :)

I seem to get Lain a lot!

Anyways, if you mean having the code here in the forums formatting and with syntax highlighting (coloured based on the type of code), then you can follow the directions that Marcus Parsons shared as an animated gif in the comment to your original post.

You can also refer to the Markdown Cheatsheet, which is linked below the editing box when you're writing a new or edited comment/answer.