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

Question

When I write something like:

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

or:

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

The margin shows up properly.

But when I write:

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

or:

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

With this rule:

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

HTML generated code:

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

The table and button display without margin. Why ?

Answer 1

1. Test if the CSS rule is applied by adding a background-color :

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

2. If yes, then add !important to your existing instruction for testing purpose:

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

   1. Look in Firebug/Inspector which rules are applied; if there are many declarations, which one has an !important modifier or has more specificity than others or comes last and is finally applied.

Is your CSS applied? Does !important change something? What do you see in Firebug? Come back with a fiddle (without CSS reset!) if you still have a problem: HTML and CSS code can help us to understand your problem; back-end code that generates HTML doesn't

Answer 2

Oh, please sorry, it was my very stupid mistake. I forget to add in HTML :

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

I thought that I added it.

Answer 3

.marg css类的左边距设置为50px，这与属性内部的设置为30px不同。