Using margin with display table-cell
13,781
display: table-cell
makes your element display just as if it were in a <table>
, where, unfortunately, doesn't work well with margins. You could add another <div>
inside this element and give this one a margin
, or simply give it padding. It depends on the desired design, really.
Author by
user2982110
Updated on June 24, 2022Comments
-
user2982110 almost 2 years
I have try adding margin-left/margin-right in li but it doesn't give them a space in between. What should I add to make a space in between the list ?
CSS:
.btn-top { float: right; height: 40px; margin-right: 10px; margin-top: 10px; } .btn-top ul { height: 100%; padding: 0; } .btn-top ul li { list-style-type: none; display: table-cell; width: 100px; height: 30px; vertical-align: middle; text-align: center; border-style: solid; border-color: #333; border-width: 2px; border-radius: 10px; }
HTML:
<div class="btn-top"><ul> <li><a href="#"><span class="btn" =>btn1</span></a></li> <li style="width:150px"><a href="#"><span class="btn">btn2</span></a></li> </ul>