Div'e 1 piksel kenarlık eklendiğinde Div boyutu artar, Bunu yapmak istemiyorum

Ekliyorum seçeneğine tıklayın, div boyutuna 1px sınır, böylece Div boyutu 2px X 2px artar. Div boyutunu büyütmek istemiyorum. Bunu yapmanın basit bir yolu var mı?

Dağınık Ayrıntılı Açıklama
Aslında, bir container-div'e float: left (aynı boyutta, simgeler gibi) ile DIV'ler ekliyorum, böylece tümü birbiri ardına istiflenir ve (container-div genişliği 300px'dir) genişlik açısından boşluk kalmadığında alt DIV'ler sonraki satırda gelir, dolayısıyla katalog benzer, ancak sınır nedeniyle sadece seçilen DIV boyutu artar, seçilen DIV altındaki DIV sağa gider ve seçilen DIV'nin altında boş alan oluşturur.

DÜZENLEME:
Seçimde Yükseklik / Genişliği azaltma, ancak nasıl yeniden artırılacağı. Bazı üçüncü taraf çerçeveler kullanıldığında, DIV seçimi kaybettiğinde olay olmayın ..

Border css özelliği, tablolardaki tds hariç tüm öğelerin "dış" boyutunu artıracaktır. Firebug'da ( üretilmiyor ), html-> layout sekmesinin altında bunun nasıl çalıştığına dair görsel bir fikir edinebilirsiniz.

Örnek olarak, genişliği ve yüksekliği 10 piksel ve kenarlığı 1 piksel olan bir div, 12 piksellik bir dış genişliğe ve yüksekliğe sahip olacaktır.

Sizin durumunuzda, kenarlığın div'in "içinde" görünmesini sağlamak için, seçtiğiniz CSS sınıfında, öğenin genişliğini ve yüksekliğini kenarlık boyutunuzu iki katına düşürebilir veya aynısını aşağıdakiler için yapabilirsiniz: öğeler dolgusu.

Örneğin:

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

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

Bu, bu senaryoda da yararlıdır. div genişliğini değiştirmeden sınırları ayarlamanıza olanak tanır

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+ */
}

Alındığı http://css-tricks.com/box-sizing/

arka planla aynı renkte olması için tıklamadan önce üzerine bir kenarlık ayarlayın.

Sonra tıkladığınızda sadece arka plan rengini değiştirin ve genişlik değişmeyecektir.

outlineBunun yerine başka bir iyi çözüm kullanmaktır border. Kutu modelini etkilemeden bir sınır ekler. Bu, IE8 +, Chrome, Firefox, Opera, Safari'de çalışır.

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

Değiştirmeyi deneyin borderiçin outline:

outline: 1px solid black;

Bu çözümlerin çoğunu kullandıktan sonra border-color: transparent, en esnek ve en yaygın şekilde desteklenen ayar hilesi olduğunu görüyorum :

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

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

Neden daha iyi:

• Öğenin genişliğini sabit kodlamaya gerek yok
• Harika tarayıcılar arası destek (yalnızca IE6 kaçırıldı)
• İle aksine outline, örneğin üst ve alt kenarlıkları ayrı ayrı belirtebilirsiniz.
• Arka plan rengini ayarlamaktan farklı olarak, arka planı değiştirirseniz bunu güncellemenize gerek yoktur ve düz olmayan renkli arka planlarla uyumludur.

Bunu dene

box-sizing: border-box;

Bu sorunu çözmek için genellikle dolgu kullanıyorum. Kenarlık kaybolduğunda dolgu eklenecek ve kenarlık göründüğünde kaldırılacaktır. Basit kod:

.good-border {
  padding: 1px;
}

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

Örnek kodumun tamamını JSFiddle'da görüntüleyin: https://jsfiddle.net/3t7vyebt/4/

Sadece genişliği ve yüksekliği kenarlık genişliğinin iki katı kadar azaltın

Ek gölgelerle bazı süslü şeyler yapabilirsiniz. Boyutunu değiştirmeden bir öğenin altına kenarlık koyma örneği:

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

Bazen, açık bir şekilde ayarlanmadan yükseklik veya genişliğin etkilenmesini istemezsiniz. Bu durumda, sözde öğeleri kullanmayı yararlı buluyorum.

.border-me {
    position: relative;
}

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

Ayrıca sözde unsurla çok daha fazlasını yapabilirsiniz, bu yüzden bu oldukça güçlü bir modeldir.

Kenarlığı artırdığınızda kenar boşluğu boyutunu azaltmayı deneyin

Bir sınıf ekleyerek herhangi bir öğeyi "sınırlayabilmem" ve boyutlarını etkilememem gerekiyordu. Benim için iyi bir çözüm, kutu gölgesi kullanmaktı. Ancak bazı durumlarda, diğer kardeşler nedeniyle etki görülmedi. Bu yüzden hem tipik kutu gölgesini hem de ekli kutu gölgesini birleştirdim. Sonuç, herhangi bir boyutu değiştirmeden bir kenarlık görünümüdür.

Virgülle ayrılmış değerler. İşte basit bir örnek:

.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

Tercih ettiğiniz görünüme göre ayarlayın ve gitmeniz iyi olur!

Css calc () fonksiyonunu da kullanabiliriz

width: calc(100% - 2px);

kenarlıklar için 2 piksel çıkarılıyor

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

Arka planınızla aynı renkte kenarlıklı öğe oluşturabilirsiniz, ardından kenarlığın görünmesini istediğinizde rengini değiştirmeniz yeterlidir.

İçeriğiniz divdinamik olarak işleniyorsa ve yüksekliğini ayarlamak istiyorsanız, basit bir hile kullanabilirsiniz outline:

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

button:hover {
    outline-color: transparent;
}

Örnek burada: https://codepen.io/Happysk/pen/zeQzaZ

Bir kutu gölge ekini deneyebilirsiniz

bunun gibi bir şey: kutu-gölge: inset 0px -5px 0px 0px #fff

boyutu artırmadan öğenin altına 5 piksellik beyaz bir kenarlık ekler