Css 两个即使宽度相同，也没有正确排列

底部的没有与顶部的对齐，即使它们在总宽度上相互匹配

每个都有一个右边缘10px和底部边缘10px

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

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

请帮忙。谢谢大家!

这是因为在本例中，列表项以及HTML元素之间的选项卡和新行被视为空白

您可以使用CSS float，也可以按如下方式删除空白：

主保险商实验室{ 字体：0/0 a；/*将容器的字体大小和行距设置为0*/ } 李梅因先生{ /*然后重置列表项上的有效值*/ 字体：18px/1.1em Helvetica Neue，Helvetica，Arial，无衬线； /*其他声明*/ } 有两种方法可以删除内联块元素之间的空间：

最小化HTML 负边际 将空白注释掉 打破封闭标签 将父项的字体大小设置为零，然后为子项重置该字体大小 而是浮动内联项 使用flexbox

---

你的选择。

那是因为你的瓷砖之间还有一个空间。 要解决这个问题，请让“雇佣我”瓷砖的宽度为315像素

---

非常感谢。成功了。今天我学到了一些新东西：我用float代替内联块。这似乎是最好的选择：@serhii.css，这也是我的选择。虽然float和inline块都不是为布局目的而设计的，但是CSS float在这种情况下更有用；别忘了清理浮子；

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