Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does div display:table-row ignore margin?

Tags:

html

css

The following html works as expected apart from margin-top being completely ignored by table row div. And I can't figure out why.

<div class='table'>

  <div class='margin-top5 row user' id='user_113'>
    <div class='cell left avatar margin-right5'><img alt="Blank_avatar_thumb" src="/images/blank_avatar_thumb.png?1295354025" /></div>
    <div class='cell left'>
      <div class='bold'><a href="/voisins/113">Dandre</a></div>
      <div class='small of_hidden'>toothpicking, veryveryveryveeerrrryyyyyylooooooooong, kidnapping...</div>
    </div>
    <div class='cell right'>42</div>

    <div class='clear'></div>
  </div>
  /* more rows */
</div>

css:

div.table {
  display: table;
  width: 100%;
}
div.row {
  display: table-row;
}
div.cell {
  display: table-cell;
}
div.left {
  float: left;
}
div.right {
  float: right;
}
div.clear {
  clear: both;
}
.avatar {
  vertical-align: middle;
}
.margin-top5 {
  margin-top: 5px;
}
.margin-right5 {
  margin-right: 5px;
}
.bold {
  font-weight: bold;
}
.of_hidden {
  overflow: hidden;
}
.small {
  font-size: 0.8em;
}
body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

EDIT:

If I remove .row class from row div, it starts picking up margin-top.

like image 553
artemave Avatar asked Jan 19 '11 17:01

artemave


People also ask

How do I set table row margins?

Another way of applying some margin on a <tbody> element is to use a ::before or ::after pseudo element. This way we basically add a new (empty) row which we can use to add some space at the beginning of our <tbody> elements.

Can div have margin?

div s are used to create what used to be known as layers, and can be used as a replacement for tabled layout. We get down to that fully in CSS Layout. Default margins, borders and padding are all 0, so when you wrap a div around some text, there is no space between its edges and the text.

How do I display a div in a table cell?

Ideally we strive to separate semantic mark-up and presentation, so <table> tags should be reserved for data that's structured in a table format, and if you just want a grid layout that behaves a bit like a table, use <div> tags with display: table-cell instead.

How do I fix the margin in CSS?

Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .


2 Answers

This is the cullprit: display: table-row; You're telling the div to behave like a tr, tr's don't have a margin... or padding.

You can apply a padding to a td, but not a margin.

like image 93
Steven K. Avatar answered Oct 20 '22 22:10

Steven K.


Use border-spacing: 10px; for the div with display:table;

Use this link for refference: space between divs - display table-cell

like image 37
kdobrev Avatar answered Oct 20 '22 23:10

kdobrev