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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try changing border to outline   outline  1px solid black

User · Answer

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

User · Answer

I usually use padding to resolve this issue  The padding will be added when border disappears and removed when border appears  Sample code    good-border     padding  1px      good-border hover     padding  0px    border  1px solid blue        View my full sample code on JSFiddle  https   jsfiddle net 3t7vyebt 4

User · Answer

We can also use css calc   function  width  calc 100  - 2px     subtracting 2px for borders

User · Answer

Try this   box-sizing  border-box

User · Answer

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

User · Answer

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

User · Answer

Try decreasing the margin size when you increase the border

User · Answer

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

User · Answer

filter list button remove       border  1px solid transparent       background-color  transparent     filter list button remove hover       border  1px solid

User · Answer

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

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

Examples related to css

Examples related to html

Examples related to border