Why is a div with “display: table-cell;” not affected by margin?

by

Cause

From the MDN documentation:

[The margin property] applies to all elements except elements with
table display types other than table-caption, table and inline-table

In other words, the margin property is not applicable to display:table-cell elements.

Solution

Consider using the border-spacing property instead.

Note it should be applied to a parent element with a display:table layout and border-collapse:separate.

For example:

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

See jsFiddle demo

Different margin horizontally and vertically

As mentioned by Diego Quirós, the border-spacing property also accepts two values to set a different margin for the horizontal and vertical axes.

For example

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

More Related Contents:

  1. Specific order of inline-block elements on mobile and desktop devices
  2. How to make moving CSS objects like this?
  3. how to align the image to the center? [closed]
  4. Why doesn’t height: 100% work to expand divs to the screen height?
  5. Proper use of flex properties when nesting flex containers
  6. How can I override Bootstrap CSS styles?
  7. Nesting block level elements inside the tag… right or wrong?
  8. Applying a background to and/or
  9. How to blur(css) div without blur child element [duplicate]
  10. Using flex order property to re-arrange items for desktop and mobile views
  11. Make div (height) occupy parent remaining height
  12. How can I create a marquee effect?
  13. CSS overflow:hidden with floats
  14. Grid areas not laying out properly in CSS Grid
  15. Why is there a vertical scroll bar if parent and child have the same height?
  16. Centering a div block without the width
  17. Turn off iPhone/Safari input element rounding
  18. Multiple Spaces Between Words in HTML without  
  19. Margin while printing html page
  20. CSS Transition – eases in but doesn’t ease out?
  21. How do I center list items inside a UL element?
  22. Why does CSS not support negative padding?
  23. Specifying Tab-Width?
  24. Is there a way to tell browsers to honor the jpeg exif orientation?
  25. CSS hide scroll bar if not needed
  26. The css padding is not working in outlook
  27. How to put img inline with text
  28. Load a low-res background image first, then a high-res one
  29. Can I use an image from my local file system as background in HTML? [duplicate]
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment