Border: 1px powoduje powiększenie się całego diva.

Question

Dzień dobry.

Mam pewien problem. Mianowicie zwiększenie border-bottom o 1px powoduje zwiększenie się całej dolnej częsci diva menu.

.menu {
    width: 100%;
    background-color: #333333;
    text-align: center;
    margin-top: 10px;
    box-sizing: border-box;
}

A poniżej dodany border-bottom

.menu {
    width: 100%;
    background-color: #333333;
    text-align: center;
    margin-top: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid white;
}

 

Zamieszczam również cały kod dotyczący div'a menu:

#container {
    height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.menu {
    width: 100%;
    background-color: #333333;
    text-align: center;
    margin-top: 10px;
    box-sizing: border-box;
}

.menu a {
    margin-top: 15px;
    top: 50%;
    bottom: 50%;
    font-size: 24px;
    color: white;
    text-decoration: none;
}

.menu a:hover {
    color: gray;
}

.menu ul li {
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}

Z góry dziękuję za odpowiedź!

Comments

Rozwiązanie tutaj przy okazji innego pytania do tego samego kodu.

Answer 1

Dzieje się tak ponieważ ramka jest zewnętrznym elementem diva więc ten pixel zostaje dodany jeśli chcesz zachować starą szerokość możesz próbować użyć np calc(100%-1px) dla wysokości diva

Comments

O tak?:

.menu {
    width: 100%;
    height: calc(100%-1px);
    background-color: #333333;
    text-align: center;
    margin-top: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid white;
}

Nie działa...