Question

当我写下这样的东西时：

<table style="margin-left: 30px;" >
</table>

或：

<div style="margin-left: 30px;">
            <h:commandButton value="add" action="a"></h:commandButton>
            <h:commandButton value="cancel" action="b" immediate="true"></h:commandButton>
</div>

保证金正确显示。

但是当我写道：

<table class="marg" >
</table>

或：

<div class="marg">
    <h:commandButton value="add" action="a"></h:commandButton>
    <h:commandButton value="cancel" action="b" immediate="true"></h:commandButton>
</div>

遵守这条规则：

.marg {
    margin-left: 50px;
    margin-top: 30px; 
}

HTML生成的代码：

<table class="marg">
</table>
<div class="marg">
<input id="j_id1109917403_4227fec1:j_id1109917403_4227feb3" type="submit" value="add" name="j_id1109917403_4227fec1:j_id1109917403_4227feb3">
<input id="j_id1109917403_4227fec1:j_id1109917403_4227feae" type="submit" value="cancel" name="j_id1109917403_4227fec1:j_id1109917403_4227feae">
</div>

表格和按钮显示无边距。为什么？

Answer 1

通过添加background-color：

来测试是否应用了CSS规则

.marg {
  margin-left: 50px;
  margin-top: 30px;
  background-color: pink;
}

如果是，请将!important添加到现有指令中以进行测试：
```
.marg {
  margin-left: 50px !important;
  margin-top: 30px !important;
  background-color: pink;
}
```
1. 查看Firebug / Inspector应用哪些规则;如果有很多声明，哪一个具有！important修饰符或具有比其他声明更多的特异性，或者是最后一个并最终应用。

您的CSS是否已应用？ !important改变了什么吗？你在Firebug看到了什么？如果你还有问题，请回来一个小提琴（没有CSS重置！）：HTML和CSS代码可以帮助我们理解你的问题;生成HTML的后端代码不是

Answer 2

哦，对不起，这是我非常愚蠢的错误。我忘记添加HTML：

<link rel="stylesheet" type="text/css" href="style/myCSS.css"   media="all" />

我以为我加了它。

Answer 3

.marg css类的margin-left设置为50px，与设置为30px的属性不同。

保证金在内联时正常工作，但在css规则中不起作用

3 个答案: