Vertically center text in div, with minimal padding above and below it (spectre.css)-CodePudding

Example: https://jsfiddle.net/notayam/4mLzus0y/

I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.

Adding vertical-align: middle !important; didn't help.

I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.

I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.

Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.

The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.

CodePudding user response：

.btn {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: unset !important;
}

CodePudding user response：

I don't know if I understood what you want, but here is some solution:

        .btn-group .btn {
          padding-top: 0;
          padding-bottom: 0;
          /* This is to clear line height */
          line-height: 1em;
          display: flex;
          flex-direction: column;
          justify-content: center;
}

We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.