Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why does div display: table-row ignore margin?
You might have come across a situation when several div elements are together and are next to each other with the property as display: table-cell and there is no margin between them. If you want to set a margin between them, you will need to add margin by adding margin externally.
In this article, we are going to have a look why does the display: table--row ignores margin and how can we add margin if we want to add it.
How to add the margin to the table?
You might be thinking if we add margin externally in the table-row then this might add margin to the table. But, let’s see what can happen when we add margin externally.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of adding the margin to the table</title>
<style>
.dog{
display: table-cell;
margin: 50px;
background-color:green;
}
.frog{
display: table-cell;
margin: 50px;
background-color:blueviolet;
}
</style>
</head>
<body>
<div class="dog">100</div>
<div class="frog">200</div>
</body>
</html>
In the above code, we made to div containers and added two numbers in them and gave them classes. After which, in the CSS section we changed the display of both of them to table-row and added margin externally. Let’s look at the output to see whether the margin is added or not.
In the above output, you can see that no margin has been added between both of these containers and remember that we changed both of their displays to table-row.
Now, you might be wondering why did this happen. The margin should have been added to the table-row and why is the margin ignored here?
The margin property that we used here is applied to all the elements except the elements which is of table display types which means that the margin property is not applicable to table-cell properties. The padding property also does not create space between table cells. So, how can we do that?
The different methods through which we can add margin to these table cells are the border-spacing property and using the margin property in a different way.
Using the border-spacing property
The first method that we are going to have a look at is the border-spacing property and it will be applied to a parent element and set the display to “table layout” and border-collapse.
And, here goes the code for it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of adding the margin to the table</title>
<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">Hi everyone</div>
<div class="cell">Welcomme to another tutorial</div>
<div class="cell">We will learn about bhow to add margin</div>
</div>
</div>
</body>
</html>
In the above code, we first created div elements and then gave them classes after which in the CSS section we added the border-collapse property and set the display to table-cell. Let’s look how our output will look after using the above code.
In the above output, you can see that the margin has been added between the table cells after we used the border-spacing property.
Using the margin property
The second method that we will be using is to add the margin property to the inner DIVs. When we add the margin property to external div the margin property does not work. The margin property will work with the inner DIVs so let’s look at another example so that we can understand how the margin property will work.
Example
In the following example, we created two divs and within them added nested divs. In the outer div, we used the property display and set its value to table cell and gave these divs two different colors to represent them.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using the margin property on the inner DIVs</title>
</head>
<body>
<div style="display: table-cell;">
<div style="margin: 15px; background-color: lightgreen;">
Hi everyone welcome to another tutorial!!
</div>
</div>
<div style="display: table-cell; ">
<div style="margin: 25px; background-color: lightblue;">
Good Morning!!
</div>
</div>
</body>
</html>
In the above output, you can see that the green part and the blue part are separated by a margin which means that the margin which is declared in the inner div adds the margin between the table cells.
Conclusion
The margin property adds margin between elements but it does not work with elements which has their display in table types. Margin is important so as to align the elements on the webpage. The alignment of the elements ensures proper readability and clarity to the user and makes the website look cleaner.
860 Views
