无法删除右边距，它会随着 div 宽度的缩小而增长答案

【问题标题】：Can't remove right margin and it grows as div width shrinks无法删除右边距，它会随着 div 宽度的缩小而增长
【发布时间】：2016-07-24 04:48:25
【问题描述】：

这似乎是一个非常标准的情况，但 HTML/CSS 的行为很奇怪。我正在为游戏构建个人资料页面，并且还在研究移动响应能力。我似乎无法获得离开的权利。在竖屏模式下（使用 Chrome 移动模拟器扩展）没有问题，但在横屏模式下，div + margin 太宽并出现滚动条。

HTML：

<div class="userProfile" style="display:none">
    <div class="profileTop">
        <div class="profilePicture">
            <img src="somepicture.png"></img>
        </div>
        <div class="profileName"></div>
    </div>
</div>

CSS：

.profileTop {
    position: relative;
    top: 10%;
    left: 15%;
    width: 70%;
    height: 12%;
    margin: 0;
}

.profilePicture {
    display: inline-block;
    width: 12vw;
}

.profilePicture img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.profileName {
    display: inline-block;
    position: relative;
    font-family:Stencil;
    font-size: 1.3em    ;
    font-weight: lighter;
    color: white;
    left: 20%;
    top: 35%;
}

奇怪的是，如果我减小“profileTop”类的宽度，右边距会增加，所以整个东西的宽度都是一样的。有什么帮助吗？

编辑：我可以通过减少“userProfile”的宽度来获得一个可行的解决方案，但它仍然困扰着我，这将无法按最初的预期工作。

EDITx2：边距也存在于“userProfile”div 中。我想“profileTop” div 以某种方式跟随其父级，但即使我向两个 div 添加 margin-right: 0 属性，边距仍然存在。 "userProfile" 的父级是 body。

【问题讨论】：

旁注，图像是自动关闭的，所以<img src="somepicture.png"></img> 应该只是<img src="somepicture.png" /> 或<img src="somepicture.png">
可以加个codepen demo吗？

标签： html css margin

【解决方案1】：

HTML 代码错误，图片不需要结束标记。

其次，您可以使用媒体查询来实现这一点。媒体查询甚至可以选择横向，而且非常易于使用。祝你好运

@media (min-width: 700px) and (orientation: landscape) { ... }

附：第二次使用 codepen 或 jsFiddle，帮助你会更简单。

编辑：添加媒体查询示例

【讨论】：

我可能不清楚，但我已经在使用媒体查询了。无论我是横向还是纵向，边距都在那里。
你能把你所有的东西都加到jsFiddle吗？那会容易得多
哦，我看到了 Faraz Sh。刚刚回答了你的问题。祝你好运:)

【解决方案2】：

您需要使用更具体的选择器来覆盖最初分配的 CSS 属性。

@media (max-width: 768px) {
  div.userProfile div.profileTop {
    margin-right:0;
  }
}

【讨论】：

对我不起作用。无论如何，“profileTop”不是比最初分配的更具体吗？
div.profileTop 比 profileTop 更具体。能提供jsfiddle吗？
我知道 div.profileTop 更具体，但 .profileTop 单独应该就足够了，因为在通过 .profileTop 分配 css 之前，div 上的唯一属性是从父类继承的属性，据我所知它会被我赋予 .profileTop 的任何属性所取代。这是 jfiddle：jsfiddle.net/s1hewL2b
这不是边距权利。您已将宽度设置为 70%，因此剩余的不可用空间以橙色显示。
我不确定您所说的“不可用”空间是什么意思。根据我设置的方式，“profileTop”的左侧属性为 15%，宽度为 70%，因此应该有额外 15% 的可用空间（不可用）。因为我使用的是 % 而不是 vw，所以它应该基于容器的宽度，即“userProfile”div（如果错了，请纠正我），其宽度为 100vw。在 Chrome 中，当我转到显示边距、填充等的框模型部分并单击边距时，橙色部分会突出显示，因此 Chrome 表示橙色实际上是边距。