Are there many ways to do the same thing? I can't figure out if I'm approaching this correctly.

Question

I've been working through the Front End Web Development track. To practice what I have learned, I've started to build my own personal site.

While doing so, I've noticed many of the skills are becoming cloudy. For example, margin and padding are confusing me. I recall to use margin to move blocks away from each other while padding should be to move contents away from the edges of the block. But when putting this into practice, it seems like a jumbled mess. The end result is what I'm looking for, but I feel like if a professional looked at my code they would say "why would you do it that way?"

I guess my overall question is if there are many ways to do the same thing. Is there no difference in adding margin to h1 vs header, or is there a typical route one should take?

Thanks for the help, I appreciate it!

Answer 1 · 2015-11-17T00:46:24Z

November 17, 2015 12:46am

Yes, in any type of development it is common that there are many approach to do the same thing.

And in what you mentioned, the bug space above header, which can easily be removed by assigning a 0 value for the margin-top or by providing padding to the header class.

It will just be depending on the developer's decision what would be the best way to resolve it and in your example the most common is the first one, just providing margin-top a 0 value to the issue will resolve it right away.

Answer 2 · 2015-11-17T01:34:57Z

November 17, 2015 1:34am

One key thing about the difference between padding and margin is that padding adds to the over all size of an element, while margin does not. Padding is added on the inside, so if you have an element with an inital height of 50px, and add a top-padding of 5px, you element now has a calculated height of 55px. On the other hand, if you add 5px of top-margin instead, your element still has a calculated height of 50px. Depending on what exactly you are trying to acheive on the page, one may be a better solution than another. All that being said, there are many ways to do the same thing. It's all about asking yourself exactly what it is your trying to do. (e.g. Do you want a taller object? Or do you want an object that is a set distance away from another element on the page?)

Answer 3 · 2015-11-17T01:35:25Z

November 17, 2015 1:35am

Thanks for the response! So it doesn't really matter how you do something as long as you achieve it?

Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Trevor I. Brandt | Web Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700|Alegreya+Sans+SC:100,500' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
                <h1>Trevor I. Brandt</h1>
                <h2>Web Designer</h2>
            <nav>
                <ul>
                    <li><a href="index.html" class="selected">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
            <section>
                <p>Text text text</p>
            </section>
            <footer>
                <p>&copy; 2015 Trevor I. Brandt.</p>
            </footer>
        </div>
    </body>
</html>'''

'''css
/**************************************************
GENERAL
**************************************************/

body {
    font-family: 'Open Sans', sans-serif;
}

#wrapper {
    margin: 0 auto;
    max-width: 940px;
}

h1 {
    margin: 0 0 5px;
    font-family: 'Alegreya Sans SC', cursive;
    font-size: 2.5em;
    font-weight: 500;
    text-shadow: #6C99BB 0 3px 0;
}

h2 {
    margin: 5px 0 15px;
    font-family: 'Alegreya Sans SC', cursive;
    font-size: 1.5em;
    font-weight: 100;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
}

/**************************************************
HEADER
**************************************************/

header {
    width: 100%;
    padding: 15px 0 0;
    text-align: center;
}

/**************************************************
NAVIGATION
**************************************************/

nav {
    padding: 8px;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    padding: 0 30%;
}

/**************************************************
CONTENT
**************************************************/

 section {
     padding: 2.5% 5%;
}

/**************************************************
FOOTER
**************************************************/

footer {
    text-align: center;
}

/**************************************************
COLORS
**************************************************/

/* Site Body */
body {
    color: #30526c;
    background-color: #9ABED9;
}

/* Header */
header {
    background: #45759A;
}

/* Mobile Navigation */
nav {
    background: #6C99BB;
}

/* Headlines */
h1 {
    color: #F1F8FD;
}

h2 {
    color: #C8DFF0;
}

/* Links */
a {
    color: #30526c;
}

/* Links - Navigation */
nav a, nav a:visited {
    color: #C8DFF0;
}

/* Links - Selected Navigation Link */
nav a.selected, nav a:hover {
    color: #F1F8FD;
    font-weight: bold;
}

/* Footer */

footer {
    color: #45759A;
}'''

Did I approach things correctly or is there a much better way of doing this?

Answer 4 · 2015-11-17T01:50:06Z

November 17, 2015 1:50am

timothymerriman Awesome, thank you so much. I appreciate your help!

Welcome to the Treehouse Community

Looking to learn something new?

Trevor Brandt

Trevor Brandt

Are there many ways to do the same thing? I can't figure out if I'm approaching this correctly.

4 Answers

Flordecante Ibanez

Flordecante Ibanez

timothymerriman

timothymerriman

Trevor Brandt

Trevor Brandt

timothymerriman

timothymerriman

Sara Greer

Sara Greer

Trevor Brandt

Trevor Brandt