css - 两个 没有正确排列，即使它们的宽度相同

Question

    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;
    }

底部的与顶部的不对齐，即使它们的总宽度彼此匹配。

每个

都有一个 margin-right 10px 和 margin-bottom 10px。

我正在使用重置样式表来删除浏览器设置。

我想不出任何不允许它正确对齐的东西。

Codepen

请帮忙。谢谢!

Answer 1

这是因为the white-space between inline block elements (在这种情况下，列表项)制表符和 HTML 元素之间的新行也被计为空白。

您可以使用 CSS float 或只删除空格，如下所示:

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 */
}

有几种方法可以删除内联( block )元素之间的空格:

• 最小化 HTML
• 负边距
• 注释掉空白
• 打破结束标签
• 将父级的字体大小设置为零，然后为子级重置
• 改为 float 内联项
• 使用 flex 盒子

你的选择。