Css page margin not working, with top, bottom, left, right and center margin auto

In the process of writing Css styles, sometimes you will encounter the situation that Css does not work. No matter how you modify it, the webpage will not change. For example: no matter how to modify margin-top, margin-bottom, margin-left and margin-right, they will not work. Css margin does not work usually because some properties are set less, as long as they are supplemented, margin will work.

Example: Css margin top not working

1. Css code:

<style type="text/css">
              body{margin-left:auto; margin-right:auto; }
              .item{width:950px; }
              .itemList{margin-top:10px;}
              .leftList{width:460px; height:250px; float:left; margin-right:10px; border:#d1dadf 1px solid;}
              .rightList{width:460px; height:250px; float:left; border:#d1dadf 1px solid;}
              body,div,ul,li,input{padding:0; margin:0;}
              ul,li,ol{list-style:none;}
       </style>

2. html code:

<div class="item">
              <ul class="itemList">
                     <li class="leftList">
                            <h3>Website Product List</h3>
                            <ul><li>ul li list</li></ul>
                     </li>
                     <li class="rightList">
                       <h3>Article list</h3>
                            <ul><li>ul li list</li></ul>
                     </li>
              </ul>
              <div style="margin-top:100px;">Css margin top not working, Css page margin not working</div>
       </div>

Result as shown below:

Figure 1

Although "margin-top:100px;" is added to the div where the margin is not working, it is still close to the border of the above list, and the added "margin-top:100px" has no effect at all.

        How can margin work? There are three methods (applicable to margin-top, margin-bottom, margin-left, and margin-right are not working), as follows:

1. Add "overflow:hidden;" to the style ".itemList" namely:

.itemList{margin-top:10px;overflow:hidden;}

Then the div where the margin is not working is immediately moved down by 20 pixels, as shown in Figure 2:

Figure 2

2. Add "width:950px;" to the style ".itemList" namely:

.itemList{margin-top:10px;width:950px;}

The effect of method 1 can also be achieved, as shown in Figure 2.

3. Add "clear:both;" to the div where the margin is not working namely:

<div style="margin-top:100px; clear:both;"></div>

The effects of the above two methods can also be achieved, see Figure 2.

Tip: There can be no spaces between numbers and px. For example, "margin-top:100 px" is invalid. You must remove the space between 100 and px, which is "margin-top:100px".

In addition to the above three methods, there may be other methods that have similarities and similarities. You can explore and try for yourself.

Css center margin auto not working

Css code:

<style type="text/css">
              .page{margin-left:auto; margin-right:auto; padding:10px; border:#d1dadf 1px solid;}
       </style>

html code:

<div class="page"><div>Css center margin auto not working</div></div>

The effect is shown in Figure 3:

Figure 3

Solution:

Just add width to Css and the box will be centered, then Css becomes:

.page{width:600px; margin-left:auto; margin-right:auto; padding:10px; border:#d1dadf 1px solid;}

The effect is shown in Figure 4:

Figure 4