Open In App

Why does div display:table-row ignore margin ?

Improve
Improve
Like Article
Like
Save
Share
Report

If you have HTML div elements next to each other with display: table-cell; and you want to set a margin between them then there will be no effect of margin. Therefore, we have to add margin externally. In this article, we will learn how to add margin in the table cell.

Example: In this example, we will use the margin property.

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 properties in tables.

Example: We can use the 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 is 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



Last Updated : 31 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads