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?

Answer 1

Try changing border to outline:

outline: 1px solid black;

Answer 2

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 3

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

Answer 4

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 5

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 6

Try decreasing the margin size when you increase the border