CODEWITHSUNDEEP
htmlcssborder-box
Lars Flygt
Lars Flygt

Reputation: 11

Even height on divs with and without a border

Can i make two buttons with 1em padding - one with a background color and other with a border, to have the same height? Basically to have the border inside of the div.

Tried to use box-sizing: border-box; method, but that didnt solve my problem.

Html:

<div class="button1">Button1</div>
<div class="button2">Button2</div>

CSS:

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

.button1 {
    padding: 1em;
    border-style: solid;
    border-color: #666;
    border-width: 4px;
    display: inline-block;
}

.button2 {
    padding: 1em;
    background-color: #e54;
    display: inline-block;
}

Can't wrap my head around it, seemed like a logical solution. Thanks in advance.

Upvotes: 0

Views: 98

Answers (3)

essmahr
essmahr

Reputation: 676

give .button2 a border with a color identical to its background-color.

Fiddle showing this: JS Fiddle

Upvotes: 1

Dryden Long
Dryden Long

Reputation: 10190

You could use the calc function in CSS to add the 4px of padding to the second button. This won't put the border inside the div, but rather adjust the padding on the second div to match the first...

.button2 {
  padding: calc(1em + 4px);
  background-color: #e54;
  display: inline-block;
}

Doesn't work in IE8 or below, but then again, what does? Here is a fiddle: http://jsfiddle.net/a8LT7/

Upvotes: 0

Bikas
Bikas

Reputation: 2759

Do the following

.button1 {
   outline: solid #666 4px;
}

Remove other border details.

Upvotes: 0

Related Questions