Two
are not lined up properly even tho they are the same width

Question

enter image description here

    body {
    font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #ffffff;
}

a {
    font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #ffffff;
    text-decoration: none;
}

.container {
    margin: auto;
    margin-top: 5%;
    width: 1280px;
    height: 800px;
    background-image: url(../img/background.jpg);
    overflow: hidden;
}

.content {
    margin: 100px 0 164px 170px;
}

.logo a {
    font-size: 65px;
    font-weight: 200;
    line-height: 26px;
}

.main {
    margin-top: 94px;
}

    .main li {
        background-position: center center;
        background-repeat: no-repeat;
        display: inline-block;
        height: 150px;
        width: 150px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .main li.home {
        background-color: #3387ea;
        background-image: url(../img/home.png);
        width: 150px;
        height: 150px;
    }

    .main li.about {
        background-color: #f9be3e;
        background-image: url(../img/about.png);
        width: 150px;
        height: 150px;
    }

    .main li.portfolio {
        background-color: #d3573e;
        background-image: url(../img/portfolio.png);
        width: 280px;
        height: 150px;
    }

    .main li.photos {
        background-color: #59b0e2;
        background-image: url(../img/photos.png);
        width: 150px;
        height: 150px;
    }

    .main li.testimonials {
        background-color: #33af95;
        background-image: url(../img/testimonials.png);
        width: 150px;
        height: 150px;
    }

    .main li.hire {
        background-color:  #86a73f;
        background-image: url(../img/hire.png);
        width: 310px;
        height: 150px;
    }

    .main li.blog {
        background-color: #151a26;
        width: 440px;
        height: 150px;
    }

    .main li.contact {
        background-color: #7e5b8c;
        background-image: url(../img/contact.png);
        width: 150px;
        height: 150px;
    }

The bottom 's are not lined up with top ones even though they match each other in total width.

Each

has a margin-right 10px and margin-bottom 10px.

I am using reset style sheet to remove browser setting.

I cannot think of anything that will not allow it to align properly.

Codepen

Please help. Thank you!

score 4 · Accepted Answer · edited May 23 '17 at 12:27

4

This is because the white-space between inline block elements (in this case, the list items) also tabs and new lines between HTML elements are count as a white space.

You could either use CSS float or just remove the white space as follows:

EXAMPLE HERE

.main ul {
  font: 0/0 a; /* Set font-size and line-height to 0 for the container */
}

.main li {
  /* Then reset the valid value on list items */
  font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* other declarations */
}

There are couple of ways to remove the space between inline(-block) elements:

Minimized the HTML
Negative margins
Comment the white space out
Break the closing tag
Set the font size of the parent to zero then reset that for children
Float the inline items instead
Use flexbox

Your choice.

edited May 23 '17 at 12:27

Community

1
1

answered Aug 29 '14 at 11:11

Hashem Qolami

97,268
26
150
164

1

Thank you! That worked. Learned something new today :) – Serhii Borovskyi Aug 29 '14 at 11:14
I used float instead of inline block. It seems like the best option :) – Serhii Borovskyi Aug 29 '14 at 11:30
1

@serhii.css That would be my choice as well. While neither of `float` and `inline-block` are designed exactly for layout purposes, CSS float would be more helpful in this case; And don't forget to `clear` the float ;) – Hashem Qolami Aug 29 '14 at 11:38

score 0 · Answer 2 · answered Aug 29 '14 at 11:16

0

That's because there's still a space between your tiles. To solve this, make your hire me tile's width 315px.

enter image description here

answered Aug 29 '14 at 11:16

lxcky

1,668
2
13
26

Two are not lined up properly even tho they are the same width

2 Answers2

Two
are not lined up properly even tho they are the same width