Remove unwanted padding at bottom of bootstrap static navbar

Question

I am using Bootstrap and am having trouble with the navbar. In my navbar, I have a few divs that I want to be the full height of the navbar, but the navbar constantly seems to be just a bit taller than the divs inside. I figured this was due to some padding on the navbar somewhere, but I can't find it. Check out this jsFiddle:

https://jsfiddle.net/2fax4vme/

Note the three .rhombus divs. They should be the full height of the navbar, but there is 5 pixels of extra space under them. If I make the rhombus divs 5 pixels taller, the navbar just stretches.

I'm sure this is something simple I'm not missing, but I just can't spot it.

score 3 · Answer 1 · answered Mar 22 '15 at 00:45

3

I would not try and edit the bootstrap navbar css. In stead, why dont you just counter the padding by adding a negative margin bottom to your rhombus (and add an extra few pixels to the height)

       .rhombus{
            height:50px; /* + 5px */
            width: 35px;
            -webkit-transform: skew(-20deg);
            -moz-transform: skew(-20deg);
            -o-transform: skew(-20deg);
            display: inline-block;
            margin:0px;
            padding:0px;
            margin-bottom: -5px; /* counter the padding */
        }

and the updated fiddle: https://jsfiddle.net/2fax4vme/2/

answered Mar 22 '15 at 00:45

Pevara

14,242
1
34
47

This does solve my problem, but I'd appreciate it if you could explain what is actually going on here, thanks! – Joseph Mar 22 '15 at 00:50
have a look at this answer for an explanation on negative margins: http://stackoverflow.com/questions/11495200/how-do-negative-margins-in-css-work-and-why-is-margin-top-5-margin-bottom5 – Pevara Mar 22 '15 at 00:55
I just don't understand why it needs to be used here. What part of the CSS is causing the navbar to expand when its contents get taller? – Joseph Mar 22 '15 at 01:01

Grokify · Answer 2 · 2015-03-22T00:51:29.677

1

What about changing the height of .rhombus to height:50px;. It works for me.

For HTML5, it's also necessary to add margin-bottom:-5px per Pevara.

edited Mar 22 '15 at 00:51

answered Mar 22 '15 at 00:30

Grokify

15,092
6
60
81

https://jsfiddle.net/gcdwdtLu/ That does not work. The navbar becomes 55px tall. – Joseph Mar 22 '15 at 00:34
I posted a version here which works: http://grokify.github.io/examples/so_29189619.html . The .rhombus divs become taller without stretching the navbar. Could something else be the issue? – Grokify Mar 22 '15 at 00:37
Do you know why it works in your link there, but not the jsFiddle? The code looks the same. I have tried setting `height:50px` in my page and I get the same effect as in the jsFiddle, the navbar just expands. – Joseph Mar 22 '15 at 00:41
jsFiddle automatically adds HTML5 DOCTYPE which also requires adding `margin-bottom:-5px;` per Pevara. It's not necessary if the DOCTYPE isn't there. If you add `margin-bottom:-5px` you should be good to go. – Grokify Mar 22 '15 at 00:48
What is the DOCTYPE affecting, exactly? I see `margin-bottom:-5px` does fix the problem, but I don't understand why. – Joseph Mar 22 '15 at 00:51
please do NOT omit your DTD (doctype). Doing this will trigger quirks mode in the browser and have it decide for itself how to best render the page, in stead of following the W3C standards. You'll end up with a cros browser nightmare. – Pevara Mar 22 '15 at 01:03

Stickers · Answer 3 · 2015-03-22T01:39:16.360

1

Tested: https://jsfiddle.net/2fax4vme/3/

.rhombus {
    height: 50px;
}
#navbar {
    line-height: 0;
}

I found there are few elements set to 50px in Bootstrap, so probably also make yours to the same height is a good plan to avoid editing those default values.

edited Mar 22 '15 at 01:39

answered Mar 22 '15 at 01:31

Stickers

75,527
23
147
186

Remove unwanted padding at bottom of bootstrap static navbar

3 Answers3