How does the margin works in the below code?

Question

How does the margin works in the below code? in the given code I have consider the top margin for the border as 300px and 200px top margin for the ul. So when I inspect in the browser the top-margin for the body highlighted from the top of the webpage, and when I inspect the top margin for the ul it is not highlighted from the top of the page. the below is the given code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
/* as you can see I have given the top margin as 300px*/
      body
      {
        margin : 300px 0px 0px 0px ;
      }
/* as you can see I have given the top margin as 200px for ul*/
      UL 
      { 
        background: yellow; 
        margin: 200px 12px 12px 12px;
        padding: 2px; /* No borders set */
      }
  

      LI 
      { 
        color: white;                /* text color is white */ 
        background: blue;            /* Content, padding will be blue */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                 /* No borders set */
      }


       LI.withborder 
       {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: lime;
       }
     </STYLE>
   </HEAD>
   <BODY>
   <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is
                             a bit longer to illustrate wrapping.
   </UL>
   <UL>
       <LI>First element of list
       <LI class="withborder">Second element of list is
                              a bit longer to illustrate wrapping.
   </UL>
   </BODY>
</HTML>

score 1 · Answer 1 · answered Jan 24 '21 at 07:06

I think you have not observed carefully. I can see that both the margins are highlighted when I inspect. But they are overlapped. If you are a beginner, I would like to suggest that we don't use margins like this. We should not use margins so that overlap. Because it is of no use. Use padding for the the ul if required. Please ask for any more help if you need.

score 1 · Accepted Answer · answered Jan 24 '21 at 07:09

This is another example of the collapse margin problem. According to mdn web docs,

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior is known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

You can read more on collapsing margin here.

The body margin is 300px and the ul element margin is 200px, so the margin will collapse to 300px between them as it will take the highest margin value among them.

You can give margin to either of them, not both. One of the solutions is that you can give margin to one element and padding to another element so that margin will not be collapsed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>

<HEAD>
  <TITLE>Examples of margins, padding, and borders</TITLE>
  <STYLE type="text/css">
    /* as you can see I have given the top margin as 300px*/
    
    body {
      margin: 300px 0px 0px 0px;
    }
    /* as you can see I have given the top margin as 200px for ul*/
    
    UL {
      background: yellow;
      padding: 200px 12px 12px 12px;
      
      /* No borders set */
    }
    
    LI {
      color: white;
      /* text color is white */
      background: blue;
      /* Content, padding will be blue */
      margin: 12px 12px 12px 12px;
      padding: 12px 0px 12px 12px;
      /* Note 0px padding right */
      list-style: none/* no glyphs before a list item */
      /* No borders set */
    }
    
    LI.withborder {
      border-style: dashed;
      border-width: medium;
      /* sets border width on all sides */
      border-color: lime;
    }
  </STYLE>
</HEAD>

<BODY>
  <UL>
    <LI>First element of list
      <LI class="withborder">Second element of list is a bit longer to illustrate wrapping.
  </UL>
  <UL>
    <LI>First element of list
      <LI class="withborder">Second element of list is a bit longer to illustrate wrapping.
  </UL>
</BODY>

</HTML>

How does the margin works in the below code?

2 Answers2