css - CSSinherit padding, then lessen the number -

i have class added various sections of site show section editable. class named .editable

when user logged in, when hover on such section red dashed border shown around section.

i so:

.editable { /* add padding act clear border */     padding:1px;  } .editable:hover { /* remove padding , add border */     padding:0px;      border:1px dashed red  } 

as shown in comments, add 1px padding when border shows on hover, section doesn't 'move'.

the problem arises when section edited has padding. e.g.

.sectiontobeedited {     padding:10px; } 

when add .editable class <div class="sectiontobeedited editable">blah</div> padding overwritten.

question there way inherit padding setting , add 1px it? on hover reduce whatever padding 1px.

i know way wrap editable sections in separate divs , apply padding there involves rewriting , adding lot of classes , divs.

or there way this?

css can override values, there no support mathematical operations.

you can solve problem using white/transparent border editable class instead of padding.

.editable { /* change border color invisible */     border:1px solid white; } .editable:hover { /* make border visible */     border:1px dashed red; }