CODEWITHSUNDEEP
htmlcsspadding
HelpNeeder
HelpNeeder

Reputation: 6480

Can't remove top padding or space in table-cell, why?

I'm adding padding to my left table cell but center and right cell also gets top padding. How do I remove padding from center and right cell?

the center and right cells are still top padded.

http://jsfiddle.net/o50s8ucj/

<!doctype html>
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .left, .center, .right {
                display: table-cell;
                width: 100px;
                height: 50px;
            }

            .center, .right {
                display: table-cell;
                width: 100px;
                padding: 0;
            }

            .left {
                padding: 10px;
                background: yellow;
            }

            .center {
                background: pink;
            }

            .right {
                background: orange;
            }
        </style>
    </head>
    <body>
        <div class="left">a</div>
        <div class="center">b</div>
        <div class="right">c</div>
    </body>
</html>

Upvotes: 3

Views: 4108

Answers (5)

slevy1
slevy1

Reputation: 3832

If you replace display:table-cell with display:inline-block the padding on top of the center and right rectangles is eliminated as follows:

    * {
        margin: 0;
        /*padding: 0;*/
    }

    .left, .center, .right {

        width: 100px;
        height: 50px;
    }

    .center, .right {
        display: inline-block;
        width: 100px;
        padding: 0;
    }

    .left {
        display: inline-block;
        padding: 10px;
        background: yellow;
    }

    .center {
        background: pink;
    }

    .right {
        background: orange;
    }

Also see http://jsfiddle.net/o50s8ucj/6/

Upvotes: 1

dqiu
dqiu

Reputation: 500

I think what you want is to use vertical-align:top;

.left, .center, .right {
    display: table-cell;
    width: 100px;
    height: 50px;
    vertical-align:top;
}

Demo: http://jsfiddle.net/o50s8ucj/2/

Upvotes: 8

sarthak sharma
sarthak sharma

Reputation: 105

Only the left cell is getting top padding, center and right cells are padding-free.

Upvotes: 0

Autobots
Autobots

Reputation: 11

I think you need to add text-align: center and vertical-align : middle property to your class .left, .center and .right.

see this JS fiddle link : http://jsfiddle.net/4gnrnwka/

Hope this will help you.

Upvotes: 1

M3ghana
M3ghana

Reputation: 1271

When executed in the fiddle shared by you, it is padded only in the left and center,right remains without padding

Upvotes: 1

Related Questions