ShellRox ShellRox - 4 months ago 8
CSS Question

CSS: border is taller than div container

I was making a menu for my website, where i had overflow hidden, so borders height wouldn't be bigger than menu, But after some time i needed to get rid of

overflow:hidden
option.

After i got rid of the parameter, twice as tall borders appeared at the bottom.

This is the related style i use for buttons on my navigator menu:

.Button {
display: block;
font-size: 10pt;
float: left;
right: 15%;
left: 30%;
top: 0%;
white-space: nowrap;
color: white;
margin-top: 0%;
width: 7%;
font-family: sans-serif;
height: 0%;
padding: 25px 2px 55px 2px;
vertical-align: center;
text-align: center;
line-height: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-left: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
border-radius: 5px;
min-width: 100px;
transition: 0.1s ease-in;
}


I have tried
no-repeat
option with no success, the borders would completely disappear afterwards.

After that, i have tried setting
padding-bottom
value to
0
, which didn't make a change.

box-sizing
is set to
border-box
:

*,
*::before,
*::after {
box-sizing: border-box;
}


I also tried setting height value to
0
, which also did not make any change.

Fiddle. ( profile picture is sample, so it is not the problem ).




So what can the problem be? How can i get rid of it without hiding the overflow of menu? Is there some anchor tag that i have made incorrectly?

Answer

Try box-sizing: border-box, it doesn't allow the padding to increase the dimensions of your element