html - How to set cellspacing in CSS on non-table elements set to display:table-cell? -


how set cellspacing in css on non-table elements set display:table-cell? http://jsfiddle.net/david_knowles/ysyzj/

<dl>     <dt>definition title 1</dt>     <dd>def detail 1.1</dd> </dl> <dl>     <dt>definition title 2</dt>     <dd>def detail 2.1</dd>     <dd>def detail 2.2</dd> </dl>  dl {display:table-cell; margin:1em; background-color: #eee; vertical-align: top; padding:1em;}  dt {margin: 2px 0; padding:1em; font-weight: bold;} dd {margin: 2px 0; padding:1em; } 

edit: curious why border-spacing doesn't work in situation?

just using display:table-cell on element creates invisible (and anonymous) table around it. can accomplish border-spacing dl tags creating div container them display:table , border-spacing:(value)

as boltclock mentioned, border-spacing style applies tables need create 1 contains table cells.

css

div {   display:table;   border-spacing:5px;   border-collapse:separate; /* sure */ } 

as seen here in modified version of fiddle: http://jsfiddle.net/nv4fh/


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -