Kenarlığı kenarına değil div içine yerleştirme

Bir <div>elementim var ve üzerine bir kenarlık koymak istiyorum. Ben yazabilirim biliyorum style="border: 1px solid black", ama bu div her iki tarafına 2px ekler, bu benim istediğim değil.

Bu kenarlığın div kenarından -1 piksel olmasını tercih ederim. Div'in kendisi 100px x 100px'dir ve bir kenarlık eklersem, kenarlığın görünmesi için bazı matematik yapmak zorundayım.

Kenarlığın görünmesini ve kutunun hala 100 piksel (kenarlık dahil) olmasını sağlamanın herhangi bir yolu var mı?

box-sizingÖzelliği şu şekilde ayarla border-box:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}

<div>Hello!</div>
<div>Hello!</div>

IE8 ve üzeri sürümlerde çalışır .

Kutu gölgesini şu şekilde de kullanabilirsiniz:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

Burada örnek: http://jsfiddle.net/nVyXS/ (kenarlığı görüntülemek için üzerine gelin)

Bu yalnızca modern tarayıcılarda çalışır. Örneğin: IE 8 desteği yok. Daha fazla bilgi için bkz. Caniuse.com (kutu-gölge özelliği) .

Muhtemelen gecikmiş bir cevap, ama bulgularımla paylaşmak istiyorum. Bu soruna cevaplarda bulamadığım 2 yeni yaklaşım buldum:

box-shadowCss özelliği ile iç sınır

Evet, öğelere kutu-gölge eklemek için kutu-gölge kullanılır. Fakat insetgölge belirtebilirsiniz , bu gölge değil, iç sınır gibi görünür. Sadece yatay ve dikey gölgeleri 0pxve " spread" özelliğini sahip box-shadowolmak istediğiniz kenarlığın genişliğine ayarlamanız gerekir. 10 piksellik 'iç' kenarlık için aşağıdakileri yazabilirsiniz:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

İşte jsFiddle arasındaki fark gösterilmektedir örnek box-shadowsınır ve 'normal' sınırında. Bu şekilde kenarlığınız ve kutu genişliği, kenarlık dahil toplam 100 pikseldir.

Kutu gölgesi hakkında daha fazla bilgi: burada

Anahat css özelliği ile sınır

İşte başka bir yaklaşım, ancak bu şekilde sınır kutunun dışında olacaktı. İşte bir örnek . Örnekte gösterildiği gibi, outlineöğenin genişliğini ve yüksekliğini etkilemeyen kenarlığı ayarlamak için css özelliğini kullanabilirsiniz . Bu şekilde, kenarlık genişliği bir öğenin genişliğine eklenmez.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

Anahat hakkında daha fazla bilgi: burada

Yahoo! Bu gerçekten mümkün. Buldum.

Alt Kenarlık için:

div {box-shadow: 0px -3px 0px red inset; }

Üst Sınır için:

div {box-shadow: 0px 3px 0px red inset; }

Sahte öğe kullan :

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

Kullanarak ::afterseçilen öğenin sanal son alt öğesini şekillendiriyorsunuz. contentözelliği, anonim olarak değiştirilmiş bir öğe oluşturur .

Sözde öğeyi, üst öğeye göre mutlak konum kullanarak içeriyoruz. Ardından, ana öğenizin arka planında özel arka plan ve / veya kenarlığa sahip olma özgürlüğüne sahip olursunuz.

Bu yaklaşım, kullanımdan farklı olan ana elemanın içeriğinin yerleşimini etkilemez box-sizing: border-box;.

Bu örneği düşünün:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Burada .buttongenişlik üst öğe kullanılarak kısıtlanır. Ayarlanması, border-left-widthiçerik kutusu boyutunu ve böylece metnin konumunu ayarlar.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Sözde öğe yaklaşımının kullanılması içerik kutusu boyutunu etkilemez.

Uygulamaya bağlı olarak, bir sözde eleman kullanan yaklaşım arzu edilen bir davranış olabilir veya olmayabilir.

Bu soru box-shadowve outlineözelliklerini kullanan çözümlerle zaten yeterince yanıtlanmış olsa da, buraya (kendim gibi) bir ofset ile bir iç sınır için bir çözüm arayan herkese bunu biraz genişletmek istiyorum.

Diyelim ki siyah bir 100px x 100px'iniz var divve bunu 5px'lik bir iç ofsete ( beyaz) sahip beyaz bir kenarlıkla eklemeniz gerekiyor - bu yine de yukarıdaki özelliklerle yapılabilir.

kutu gölge

Buradaki hile, ilk gölgenin üstte olduğu ve sonraki gölgelerin daha düşük z düzenine sahip olduğu birden fazla kutu gölgesine izin verildiğini bilmektir.

Bu bilgi ile, kutu-gölge bildirimi şöyle olacaktır:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

Temel olarak, bu deklarasyonun söylediği şey: önce son (10 piksel beyaz) gölgeyi, ardından önceki 5 piksel siyah gölgeyi üzerine yerleştirin.

anahat ofset ile anahat

Yukarıda belirtilenlerle aynı etki için özet beyanlar şöyle olacaktır:

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

Not: bu sizin için önemliyse outline-offset IE tarafından desteklenmez .

Codepen demosu

Sen özelliklerini kullanabilir outlineve outline-offsetyerine normal kullanmanın negatif değer ile border, benim için çalışıyor:

div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>

Bunun biraz daha eski olduğunu biliyorum, ancak "sınır içi" anahtar kelimeleri doğrudan buraya geldiğinden, burada değinmeye değer olabilecek bazı bulguları paylaşmak istiyorum. Fareyle üzerine gelindiğinde bir kenarlık eklerken, OP'nin bahsettiği etkileri elde ettim. Kenarlık pikselleri kutunun boyutuna uyandırır. IE7 için de çalışan bununla başa çıkmanın iki yolu daha var.

1) Elemana zaten bir kenarlık ekleyin ve sadece rengi değiştirin. Bu şekilde matematik zaten dahil edilmiştir.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) Sınırınızı negatif bir farkla telafi edin. Bu yine de fazladan pikseller ekleyecektir, ancak öğenin konumlandırması sıkışık olmayacaktır.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

yeni ve eski tarayıcılar arasında tutarlı oluşturma için, dış genişliği geniş, iç kenarlığı olan bir çift kap ekleyin.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

bu sadece hassas genişliğiniz ekstra işaretleme yapmaktan daha önemliyse açıktır!

Kutu boyutlandırma kullanırsanız: border-box yalnızca kenarlık, dolgu, kenar boşluğu vb. Anlamına gelmez. Tüm öğe, ana öğenin içine gelir.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

@Steve gibi en iyi çapraz tarayıcı çözümü (çoğunlukla IE desteği için), etrafına 1px kenarlık eklemek yerine genişlik ve yükseklikte bir div 98px yapmak veya 100x100 piksel div için bir arka plan görüntüsü oluşturabilir ve üzerine bir kenarlık çizebilirsiniz.

Anahatlara ofset ile bakabilirsiniz, ancak div'inizde biraz dolgu gerekir. Veya içine bir kenarlık divı yerleştirebilirsiniz.

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

Sahte sınırlar divindeki kenar boşluklarıyla istediğiniz gibi uyum sağlamanız gerekebilir.

Daha modern bir çözüm css variablesve kullanmak olabilir calc. calcyaygın olarak desteklenmektedir ancak variableshenüz IE11'de bulunmamaktadır (çoklu dolgular mevcuttur).

:root {
  box-width: 100px;
  border-width: 1px;
}

#box {
  width: calc(var(--box-width) - var(--border-width));
}

Bu, orijinal soruların kaçınmak istediği bazı hesaplamaları kullanmasına rağmen. Ben bu css kendisi tarafından kontrol edilir gibi hesaplamaları kullanmak için iyi bir zaman olduğunu düşünüyorum. Ayrıca, daha sonra ihtiyaç duyulabilecek ek biçimlendirme veya diğer css özelliklerinin kötüye kullanılmasına gerek yoktur.

Bu çözüm yalnızca sabit bir yüksekliğe ihtiyaç duyulmadığında gerçekten yararlıdır .

Yukarıda bahsetmediğim bir çözüm, girişinizde doldurma yaptığınız durumdur, ki bu da% 99'dur. Çizgiler boyunca bir şeyler yapabilirsiniz ...

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

Bu konuda ne gibi her tarafı için border + padding + geçiş özellikleri tam menüsüne sahip olmasıdır.