CODEWITHSUNDEEP
htmlcss
jimboweb
jimboweb

Reputation: 4542

Extra space above and below text div that's not marked as padding or margin

Just trying to make a simple table display div. The css looks like this:

body {margin: 0px;}
        .mainDiv {
            display: table;
            padding-top: 4px 2px;
            border: 1px solid black;
            width: 100%;
            height: 120px;
        }
        .textDiv {
            display: table-cell;
            border: 1px solid black;
            margin: 0px 2px;
            text-align: center;
            height: 110px;
            padding: 0px;
            overflow: hidden;
        }
        .imageDiv {
            display: table-cell;
            margin: 0px 2px;    
            height: 110px;      
            width: 110px;
        }
        .text {
            margin: 0 auto;
            vertical-align: middle;
            display: inline-block;
        }

        IMG.image {
            display: flex;
            align-items: center;
            justify-content: center;                
        }

and the HTML looks like this:

    <body>
    <div class = "mainDiv">
        <div class = "imageDiv">
            <img src = "images/twitterbird_whiteonblue.jpg" width = "100px" height = "100px" class = "image" />
        </div>
        <div class = "textDiv">
            <div class = "text">
                The Lang School @thelangschool <br />
                Register for The Lang School Open House  <br />
                #constantcontact http://conta.cc/1Td8LB2
            </div>
        </div>
        <div class = "textDiv">
            <div class = "text">
                The Lang School Open House <br />
                December 7 6:30 - 8:00 PM  <br />
                Register here
            </div>
        </div>
        <div class = "imageDiv">
            <img src = "images/facebook_logo.png" width = "100px" height = "100px" class = "image" />
        </div>
    </div>
</body>

I know the css that aligns the images isn't right but that's not the problem. Without the text, .mainDiv is exactly 120px high as it should be. But when I add in the text, it becomes 176 pixels high. When I look at it in the developer console, I see this:

table div in developer console

and the size of the div is displayed this way:

enter image description here

There's no padding or anything else marked. It's just extra space for no particular reason. How do I make the table exactly 120px high as it's marked?

Upvotes: 0

Views: 1021

Answers (1)

Eric Guan
Eric Guan

Reputation: 15982

https://jsfiddle.net/yk79ed9q/1/

It's because you specified a height of 110px for textDiv

.mainDiv {
    display: table;
    padding-top: 4px 2px;
    border: 1px solid black;
    width: 100%;
    height: 120px;
}
.textDiv {
    display: table-cell;
    border: 1px solid black;
    margin: 0px 2px;
    text-align: center;
    height: 110px;
    padding: 0px;
    overflow: hidden;
}

The content height of the text "The Lang school .." is 54 px.

110-54 = 56. (The extra height that is added after the text content height)

120+56 = 176. (Height of main div + the extra height)

Remove height:110px if you want your main div to be 120px.

Upvotes: 1

Related Questions