Skip to content
Related Articles

Related Articles

Improve Article

Why does div display:table-row ignore margin ?

  • Last Updated : 19 Jul, 2021
Geek Week

 If you have HTML div elements next to each other with display: table-cell; and you want to set margin between them then there will be no effect of margin.

Example:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <div style="display: table-cell; 
                margin: 50px;
                background-color:blue;">
        10
    </div>
      
    <div style="display: table-cell; 
                margin: 50px; 
                background-color:blueviolet;">
        20
    </div>
</body>
  
</html>

Output: We can conclude from the above example that margin property is not affecting our output.

no margin effect

The margin property applies to all elements except elements with table display types other than table-caption, table, and inline-table. In simple words, we can say that margin property is not applicable on display: table-cell elements. When you will read further about this, you will get to know that the padding property does not create space between the edges of the cells. Now, the question will arise in our mind that how we will use margin property? 

There are different methods with which we can set margin property in tables.



Example: We can use margin property by using the border-spacing property. Remember it should be applied to a parent element with a display : table layout and border-collapse : separate. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .table {
            display: table;
            border-collapse: separate;
            border-spacing: 15px;
        }
  
        .row {
            display: table-row;
        }
  
        .cell {
            display: table-cell;
            padding: 5px;
            border: 1px solid black;
        }
    </style>
</head>
  
<body>
    <div class="table">
        <div class="row">
            <div class="cell">Geeks for Geeks</div>
            <div class="cell">Portal</div>
            <div class="cell">Discussion</div>
        </div>
    </div>
</body>
  
</html>

Output: It is concluded from this example that you can set margin property in this way. 

border spacing and border collapse

Example: The second method to use the margin property in inner divs.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <div style="display: table-cell;">
        <div style="margin: 15px;
            background-color: yellow;">
            Geeks For Geeks
        </div>
    </div>
    <div style="display: table-cell; ">
        <div style="margin: 25px; 
            background-color: red;">
            Portal
        </div>
    </div>
</body>
  
</html>

Output:

inner div margins




My Personal Notes arrow_drop_up
Recommended Articles
Page :