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! While you're at it, check out some resources Treehouse students have shared here.

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

HTML

Posted by Alicia Ariatti
Alicia Ariatti
1,366 Points

How do you add a margin in html (not css)? The challenge asks you to center an image and add 30 pixel to the bottom.

In the how to build a website tutorial, one of the challenge questions asks you to center the profile picture and add 30px to the bottom; the code they show is HTML. The video shows how to o this in CSS, but not HTML.

Steven Snary
Steven Snary
17,540 Points
Steven Snary
Steven Snary
17,540 Points

You can add css styles directly in the HTML by using the <style></style> tags in the <head> section of your HTML. For example if you wanted to add a margin-bottom to your <html> element then you could use either a local stylesheet in your HTML like so...

<head>
<style>
     html {
          margin-bottom: 30px;
     }
</style>
</head>

Another way is to use in-line css on the tag itself - like...

<html style="margin-bottom: 30px;">

Does this help?

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hey Alicia,

I'm not sure which challenge you are referring to as you did not link from there (it's always best to use the "Get Help" button located in the challenge / video / quiz as this then links directly to where you are).

But, just double check, there is probably a tab in the challenge window that is the CSS file. You would just click on that to switch to the file. Often, the challenges will have multiple tabs for the different files needed in the challenge.

:dizzy:

Alicia Ariatti
Alicia Ariatti
1,366 Points

Thanks Jason...you were right, there was a tab and I did not see it. Thank you! I watched the videos twice and could not figure out why they were asking me to do these steps in HTML and not CSS.

I appreciate the tip on clicking the Get Help to ask a question as well.

This was a great opportunity to experience the help of the community.

Thanks again, Alicia

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Alicia,

Can you link to the challenge that you're referring to? That said, you can add CSS styles in HTML via the style tag on the element or in the head of your HTML document.

Here is how you would add styles to the image via CSS:

/* this would be one way to do it */
img {
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
}

And here is one way you could do the same thing via HTML:

<img src="whatever_your_src_is" style="margin-top: 0px; margin-right: auto; margin-bottom: 30px; margin-left: auto;" width="width_here" height="height_here" alt="alt_text_here">

Hope this helps!

Erik

Alicia Ariatti
Alicia Ariatti
1,366 Points

thanks for your help Erik! Turns out there was a CSS tab that I missed, but this is good information for me to have as well.

I appreciate you taking the time to answer.

Alicia