CSS保证金未按预期应用

Question

我有以下内容：

正如您所看到的，“阿凡达”的宽度比我想要的宽。我尝试过设置margin-right和width，但似乎都没有效果。

问题

如何减小色谱柱的宽度？

Answer 1

您看到的是padding而非margin。该元素没有给定margin。您在浏览器上看到的绿色是padding。

.col.col-person-avtar {
 padding-right: 0;
}

如果您查看代码，col类已经有margin:0，那么就没有margin

如果这不起作用，请尝试给它!important;

.col-person-avtar {
 padding-right: 0 !important;
}

如果这不符合您的要求，请尝试以下代码。

.col-person-avtar {
 width: calc(100% - 15px) !important;
}

此15px可以更改为您想要的任何值，尝试修改它直到您获得所需的输出。

Answer 2

替换

.col-person-avatar {
    padding-top: 0px;
    margin-right: 0px;
}

要

.col-person-avatar {
    padding-top: 0px;
    margin-right: 0px !important;
}

此处，！important 将覆盖项目中某处可用的现有类。 谢谢！

Answer 3

如果是要删除的蓝色区域中的多余空间，则必须减小前一个div的宽度或删除宽度：.col的100％应该可以解决问题。

如果要删除绿色区域中的空格，请删除填充。 ：）