Why margin wont work for div with display table

Folks,

I have been trying for a long time in checking margin css attributes to display type table and its attributes for div tag. But finally this article helped me in revealing the fact. Just have a look at it.

Anyways i will explain it..

[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

<divclass="table"><divclass="row"><divclass="cell">123</div><divclass="cell">456</div><divclass="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;}

My own example:

  <div id="table" style="display: table;">
                        
                            <div id="table-row1" style="display: table-row">
                            
                                <div id="table-colum1" style="display: table-cell">
                                    <img src="images/pics07.jpg"/>
                                </div>
                                <div id="table-colum2" style="display: table-cell">
                                    <img src="images/pics08.jpg"/>
                                </div>
                                <div id="table-colum3" style="display: table-cell">
                                    <img src="images/pics09.jpg"/>
                                </div>
 
                            </div>
 
                            <div id="table-row2" style="display: table-row">
                                 <div id="table-colum1" style="display: table-cell">
                                     <img src="images/pics10.jpg"/>
                                </div>
                                <div id="table-colum2" style="display: table-cell">
                                    <img src="images/pics11.jpg"/>
                                </div>
                                <div id="table-colum3" style="display: table-cell">
                                    <img src="images/pics12.jpg"/>
                                </div>
                                
                            </div><!-- end of table-row2-->
                        
                        </div><!-- end of table-->

If you are not willing to use display type table, you can try box or try css with float:left

For remaining div you can use margin or padding for its content

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s