仅在特定媒体查询中出现边距问题

Question

我运行遇到了一个奇怪的问题，它在 @media screen and (min-width: 640px) and (max-width:840px) 的媒体查询范围内丢掉了我的整个页面。出于某种原因，我似乎将 margin-left 应用于我拥有的第一个盒子容器，但在我的代码中没有设置 margin-left。我试图在其上方的兄弟之后应用 div blue-box-container 的开头以消除白色-space，但这没有帮助。

有谁知道为什么我会把白色-space放在第一个蓝色框的左边？

如果有人需要现场观看，我可以在评论中添加网站。想要的请点赞

.blue-box-container {
    width: 100%;
    height: 100%;
}
.dark-blue-box, .light-blue-box {
    height: 33%;
    width: 50%;
    display: inline-block;
}
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {
    display: block;
    font-size: 1.1em;
    padding-top: 10px;
}
.dark-blue-box:hover .box-description-hover, .light-blue-box:hover .box-description-hover {
    display: block;
    font-size: .9em;
    padding-top: 5px;
    clear: both;
}
.dark-blue-box:hover .insideBoxWrap, .light-blue-box:hover .insideBoxWrap {
    padding: 3% 6%;
}
.dark-blue-box:hover .box-title, .light-blue-box:hover .box-title {
    padding-top: 7%;
}
.dark-blue-box:nth-child(3){
    background-color: #8fc9d6;
 }
.light-blue-box:nth-child(4){
    background-color: #45a5ba;
}
.dark-blue-box:nth-child(3):hover, .light-blue-box:nth-child(4):hover{
    background-color: purple;
}
.dark-blue-box:nth-child(5){
    background-color: #45a5ba;
 }
.light-blue-box:nth-child(6){
    background-color: #8fc9d6;
}
.insideBoxWrap {
    padding: 10% 30px;
}
.box-title {
    font-size: 2em;
}
.box-description {
    padding-top: 5px;
    font-size: 1.1em;
}
/*------Home Icons ------*/
.home-icon img {
    height: 52px;
    width: 52px;
    padding-right: 6%;
    padding-bottom: 10px;
    float: left;
}
.dark-blue-box:hover .home-icon img, .light-blue-box:hover .home-icon img {
    height: 76px;
    width: 76px;
}

HTML - 我没有为所有块附加所有内容，而是只应用了两个块来演示一般顺序。

<div class="blue-box-container">
  <div class="dark-blue-box">
    <div class="insideBoxWrap">
        <div class="home-icon"><img src="/icons/screen6.png" alt=""></div>
        <div class="box-title">Brand Strategy</div>
        <div class="box-description">Digital Roadmap</div>
        <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
        fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div><div class="light-blue-box">
    <div class="insideBoxWrap">
        <div class="home-icon"><img src="/icons/web2.png" alt=""></div>
        <div class="box-title">Development</div>
        <div class="box-description">That Outperforms</div>
        <div class="box-description-hover">Hover View fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs
        fdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfsfdsf fdfsd fdsfds fdfsdf fdsfdsf fdsfdsf fdsfs</div>
    </div>
  </div>
 </div>

Answer 1

您可以在该框上添加负值以消除白色 space。

.insideBoxWrap {
    position: relative;
    left: -10px;
}

Answer 2

我觉得

.insideBoxWrap {
    padding: 10% 30px;
}

导致白色 space 问题。您在左侧和右侧提供了 30px 的填充，因此 .insideBoxWrap 中的所有元素都向右移动了 30px。由于 insideBoxWrap 上没有背景颜色，因此出现白色 space。

Answer 3

有多种可能的解决方案，我建议在框中添加 float：

.dark-blue-box, .light-blue-box {
    height: 33%;
    width: 50%;
    display: inline-block;
    float: left;
}

它解决了您的问题。

仅在特定媒体查询中出现边距问题

Margin issue only in a certain media query

html

css

margin

responsive-design