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

CSS

Posted by Gene Bogdanovich
Gene Bogdanovich
14,618 Points

Help me to figure out where is the spacing coming from

I'm working on a Contact Me page and I have a problem. I want image boxes (red and brown) and boxes with email address and phone number (green and blue) to be vertically aligned together on two separate lines. How can I do this? These boxes have the same height. Here's the screenshot of what I have so far: [screenshot](Imgur "screenshot") Thank you very much.

<html>
<head>
    <title>Contact Me</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
    <meta charset="utf-8">
</head>
<body>
    <h1>Contact Me</h1>
    <div class="wrap">
        <h3 id="name">Name</h3>
        <ul>
            <li>
                <img id="envelope" src="img/envelope.png">
                <p id="email">address@example.com</p>
            </li>
            <li>
                <img id="phone" src="img/phone.png">
                <p id="phoneNumber">(800) 123 1100</p>
            </li>
        </ul>
    </div>
</body>
</html>

body {
    font-family: 'Roboto', sans-serif;
    background: #20b2aa;
}

h1 {
    color: white;
    width: 600px;
    margin: auto;
    font-size: 40px;
}

li {
    list-style: none;
    height: 35px;
}

ul {
    padding-left: 0;
}

.wrap {
    width: 600px;
    margin: auto;
    background: white;
    height: 200px;
}

#name {
    font-size: 25px;
    padding-top: 20px;
}

#email, #phoneNumber {
    font-size: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#envelope, #email, #phone, #phoneNumber {
    display: inline;
}

#name, #envelope, #phone {
    margin-left: 20px;
}


/* backgrounds */

#envelope {
    background: red;
}

#email {
    background: green;
}

#phone {
    background: brown;
}

#phoneNumber {
    background: blue;
}

#name {
    background: orange;
}

1 Answer

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi Eugene Bogdanovich ,

If I'm not misunderstanding the issue, I think if you apply to the following:

#envelope, #email, #phone, #phoneNumber {
    display: inline;
}

a display: inline-block; instead, or even better apply it to their parent (which I think is the li) and remove that rule altogether, then the vertical paddings you declared will be correctly applied, and you can then play with them to align correctly in the vertical axis.

Hope I got what you mean correctly.