Should I set height or padding-bottom, and why?

HTML & CSS
1

height 156px is equivalent to 102px padding-bottom so which do you use and why?

(1st Code) I replace padding bottom with height. Is that a good thing to do? And is there a difference between setting height, instead of padding for bottom?

(1st Code)

.inner .tcell {
vertical-align:top;
border:1px solid orange;
color:#0059dd;
height:156px;
line-height:1;
font-size:30px;
font-weight:bold;
padding-right:50px;
padding-left:50px;
}
.trow:last-child .tcell {
height:0px;
}

(2st Code)

    .inner .tcell {
    vertical-align:top;
    border:1px solid orange;
    color:#0059dd;
    line-height:1;
    font-size:30px;
    font-weight:bold;
    padding-right:50px;
    padding-bottom:102px;
    padding-left:50px;
    }
    .trow:last-child .tcell {
    padding-bottom:0;
    }
2

I think you know enough by now to answer this question. :wink:

Padding is the space that you put around content. Height is the space for the content (minus padding and borders).

Padding-bottom of 100px will create the same effect as height:100px (without padding) except when you add content.

Content never encroaches on the padding area (unless it overflows) and the padding-bottom of 100px will always be maintained.

Height:100px will initially create the same height box as padding-bottom:100px except that when you place content in the box it will not have any padding around it :slight_smile:

5 Likes
3

So, for that, should I be using padding or height?

4

I think you would say padding, but I’m not sure.

5

That’s for you to decide.
Reread @PaulOB post above and remember that height in tables acts like min-height in divs.

2 Likes
6

What would you use if you were doing it?

7

Setting fixed pixel heights on anything restricts the flexibility of the layout. Yes, you can use it to achieve a very precise layout design on whatever viewport size you happen to be working with, but it will not be a flexible arrangement when that viewport size is changed - for example on a phone or tablet.

Also, if you set fixed dimensions, you must be conscious of how much content you put inside the box. If you put too much into it, the additional content will overflow, and likely break your nice neat layout. Personally, I’d use padding, then leave the box size flexible by setting all the dimensions using percentages.

But that’s just me… :stuck_out_tongue:

2 Likes
8

This is obviously a very challenging exercise. Suppose we put two tables side-by-side and compare how they behave when the same text is added to both.
The challenge for asasass is to decide which behavior he prefers… the one with the height but no padding, or the one with the padding but no height.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/height-156px-is-equivlant-to-102px-padding-bottom-so-which-do-you-use-and-why/229124/2
2016.07.03 00:24
-->
    <style type="text/css">
html,body {
    height:100%;
    background:#000;
    padding:0;
    margin:0;
}
.outer {
    display:table;
    height:100%;
    margin:0 auto;
}
.inner {
    display:inline-table;
    vertical-align:top;
    table-layout:fixed;
    border-collapse:collapse;
}
.trow {display:table-row;}
.tcell {
    width:300px;
    display:table-cell;
    vertical-align:middle;
}
.controls {
    height:24px;
    color:#000000;
    background-color:#E2AB58;
}
.inner .radio1 {
    height:156px;
    vertical-align:top;
    border:1px solid orange;
    color:#0059dd;
    line-height:1;
    font-size:30px;
    font-weight:bold;
    padding-right:50px;
    padding-left:50px;
}
.trow:last-child .radio1 {
    height:1px;
}
.inner .radio2 {
    vertical-align:top;
    border:1px solid orange;
    color:#0059dd;
    line-height:1;
    font-size:30px;
    font-weight:bold;
    padding-right:50px;
    padding-bottom:102px;
    padding-left:50px;
}
.trow:last-child .radio2 {
    padding-bottom:0;
}

    </style>
</head>
<body>

<div class="outer">
    <div class="inner">
        <div class="trow">
            <div class="tcell radio1">Radio1 WCKY Cincinnati, Ohio; Home of the Grand Ole Opry
                <div class="controls"></div>
            </div>
        </div>
        <div class="trow">
            <div class="tcell radio1">Radio1 WCKY Cincinnati, Ohio
                <div class="controls"></div>
            </div>
        </div>
    </div>
    <div class="inner">
        <div class="trow">
            <div class="tcell radio2">Radio2 WCKY Cincinnati, Ohio; Home of the Grand Ole Opry
                <div class="controls"></div>
            </div>
        </div>
        <div class="trow">
            <div class="tcell radio2">Radio2 WCKY Cincinnati, Ohio
                <div class="controls"></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
1 Like
9

They both look exactly the same to me, which one to you think is better?

The one on the left, or the one on the right?

817×227 3.74 KB

10

Do they both perform the same way if you zoom text?

11

You must have your font size set unusually small; in fact I’m sure you do. None of your other posts show the font to be that small. Yeah, you reduced the font size down from 30px to 20px. Intentionally sabatoging the demo… and then you state

but they didn’t initially, You would have had no reason to reduce the font size had they both looked the same. Anyone else can run the code that I posted and see that.

1 Like
12

So, I reduced the font size, so what. They both still look the same. Show me an example where either height or padding won’t work.

13

But:

1 Like
14

No, they don’t. Why do they both act differently on zoom text?

15

Because (as @PaulOB explained) padding adds a fixed amount of padding within the border, and that remains the same no matter what happens to the text size. Height fixes the minimum height; if your content is less than that height, then there will be empty space at the bottom, but as your content increases, it will fill the space, and then stretch the table cell to fit.

This is one reason why I keep saying how important it is to know what content you intend to place in a container while building a layout; different approaches behave differently.

5 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.