CODEWITHSUNDEEP
htmlcss
ShellRox
ShellRox

Reputation: 2602

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?

Upvotes: 0

Views: 1543

Answers (2)

ZenKurd
ZenKurd

Reputation: 129

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

Upvotes: 2

Jainish Kothary
Jainish Kothary

Reputation: 93

OK Buddy !

Try to check the padding you have but in the button & you can try changing height by this :

"height:10px !important;"

Upvotes: 1

Related Questions