When 1 px border is added to div, Div size increases, Don't want to do that

Question

On click I am adding, 1px border to div, so Div size increases by 2px X 2px. I dont want to get div size increased. Is there any simple way to do so?

Messy Detailed Explanation
Actually I am adding DIVs with float:left (same size, like icons) to a container-div, so all stacks up one after another, and when (container-div width is 300px) no space left width-wise so child DIVs comes in next row, so its like catalog, but because of border only selected DIV size get increased, DIV under selected DIV goes to right and creates empty space below selected DIV.

EDIT:
Decreasing Height/Width on selection, but how to increase it back. Using some 3rd party framework, so don't have event when DIV loses selection..

Answer 1

The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.

Eg:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

Answer 2

This is also helpful in this scenario. it allows you to set borders without changing div width

textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

Taken from http://css-tricks.com/box-sizing/

Answer 3

set a border on it before you click to be the same color as the background.

Then when you click just change the background color and the width will not change.

Answer 4

If you don't have a border-radius change border to outline:

outline: 1px solid black;

Answer 5

Another good solution is to use outline instead of border. It adds a border without affecting the box model. This works on IE8+, Chrome, Firefox, Opera, Safari.

(https://stackoverflow.com/a/8319190/2105930)

Answer 6

Having used many of these solutions, I find using the trick of setting border-color: transparent to be the most flexible and widely-supported:

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

Why it's better:

• No need to to hard-code the element's width
• Great cross-browser support (only IE6 missed)
• Unlike with outline, you can still specify, e.g., top and bottom borders separately
• Unlike setting border color to be that of the background, you don't need to update this if you change the background, and it's compatible with non-solid colored backgrounds.

Answer 7

I usually use padding to solve this issue. The padding will be added when the border is not there and removed when it is back. Example:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

See my code here: https://jsfiddle.net/3t7vyebt/4/

Answer 8

Try this

box-sizing: border-box;

Answer 9

Just decrease the width and height by double of border-width

Answer 10

Sometimes you don't want height or width to be affected without explicitly setting either. In that case, I find it helpful to use pseudo elements.

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

You can also do a lot more with the pseudo element so this is a pretty powerful pattern.

Answer 11

You can do some fancy things with inset shadows. Example to put a border on the bottom of an element without changing its size:

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

Answer 12

Try decreasing the margin size when you increase the border

Answer 13

I needed to be able to "border" any element by adding a class and not affect its dimensions. A good solution for me was to use box-shadow. But in some cases the effect was not visible due to other siblings. So I combined both typical box-shadow as well as inset box-shadow. The result is a border look without changing any dimensions.

Values separated by comma. Here's a simple example:

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle

Adjust for your preferred look and you're good to go!

Answer 14

We can also use css calc() function

width: calc(100% - 2px);

subtracting 2px for borders

Answer 15

You can try a box-shadow inset

something like this: box-shadow:inset 0px -5px 0px 0px #fff

adds a white 5px border to the bottom of the element without increasing the size

Answer 16

.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}

Answer 17

You can create the element with border with the same color of your background, then when you want the border to show, just change its color.

Answer 18

In case content of your div is rendered dynamically and you want to set its height, you can use a simple trick with outline:

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

Example here: https://codepen.io/Happysk/pen/zeQzaZ