Üst dolguyu yoksay

127

Yatay kuralımın üst dolguyu yok saymasını sağlamaya çalışıyorum.

İşte sahip olduğum şeyin basit bir örneği:

#parent {
  padding:10px;
  width:100px;
}
hr {
  width:100px;
}

Yatay kuralın ebeveynden 10px kadar genişlediğini göreceksiniz. Üst div'deki diğer her şeyin ihtiyaç duyduğu dolguyu görmezden gelmesini sağlamaya çalışıyorum.

Diğer her şey için ayrı bir div oluşturabileceğimin farkındayım; aradığım çözüm bu değil.

html css

— Sam
kaynak

160

Kolay düzeltme, sadece yapın

margin:-10px

hr.

— Sam
kaynak

9

Bu işe yarıyor, ancak sorun şu ki, üst div'in tüm uzunluğunu uzatmayacak. Bunun nedeni, dolgunun 100px genişliğine dahil OLMAMASIDIR, bu, aslında 120px genişliğinde olduğu ve <hr>div'inizin sonundan 20px olacağı anlamına gelir . Ne demek istediğim için bu jsFiddle'a bakın: jsfiddle.net/YVrWy/1

— Alastair Pitts

Evet bunu eklediğimde hallettim; genişlik alakasız.

— Sam

22

% 100 genişliğe ihtiyacınız varsa, genişlik özelliği olarak yalnızca otomatik'i kullanın. Genişlik, verilen kenar boşluklarına göre hesaplanacaktır.

— schlingel

4

Böyle bir şey yapmalısınız ... margin: 0 -15px; ..... aksi takdirde hr bitişik içeriği ona doğru dikey olarak emer.

— honkskillet

biraz hile. keşke daha iyi bir yol olsaydı

— ihtiyar

29

Görüntü amacıyla böyle bir şey yapabilirsiniz

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}

— adriancho5692
kaynak

8

Peki ya ebeveynin dolgusunu mutlaka bilmiyorsanız?

1

Bu, sadece genişlik yerine min-genişlik kullandığımda benim için çalıştı.

— Pedro Nadolny

@ user5707327 ebeveynlerin dolgusunu almak için stilleri her zaman javascript ile birleştirebilirsiniz

— adriancho5692

vay, negatif genişliklerin dahice kullanımı!

— Bay PizzaGuy

9

Genel olarak bu soru cevaplandı, ancak küçük parçalar halinde herkes tarafından. Bununla bir dakika önce hallettim.

Panelin her tarafında 30px olduğu bir panelin altında bir düğme tepsisi olmasını istedim. Düğme tepsisinin alt ve yan tarafları aynı hizada olmalıdır.

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

Fikri yönlendirmek için burada daha fazla etle bir demo yaptım . Bununla birlikte, yukarıdaki anahtar öğeler, alt öğe üzerindeki negatif kenar boşluklarıyla eşleşen herhangi bir üst dolguyu dengelemektedir. Daha sonra, çocuğu tam genişlikte çalıştırmak ve ardından genişliği otomatik olarak ayarlamak istiyorsanız en kritik nokta. (yukarıda schlingel tarafından yapılan bir yorumda belirtildiği gibi ).

— Mitchell Geere
kaynak

7

Biraz geç ama biraz matematik gerektiriyor.

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

Windows'um yok, bu yüzden bunu IE'de test etmedim.

keman: keman örneği ..

— sqram
kaynak

1

Sağ dolguyu: 60px, padding-left: 30px; padding-right: 30px olarak bölmelisiniz, böylece text-align: center kullandığınızda içerik kaymaz;

— Luke

3

margin: 0 -10px;

daha iyi

margin: -10px;

Daha sonra içeriği dikey olarak içine çeker.

— honkskillet
kaynak

2

Ebeveyniniz 120 piksel genişliğindedir - yani her iki tarafta 100 genişlik + 20 dolgu, bu nedenle çizginizi 120 piksel genişliğinde yapmanız gerekir. İşte kod. Bir dahaki sefere, doldurmanın öğe genişliğini artırdığını unutmayın.

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

— easwee
kaynak

1

Tanımlanmış genişlik ile kolaydır. Sorun genişliği bilmediğin zamandır

— Guilherme Ferreira

@GuilhermeFerreira Kullanımı width: auto;içinde hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Ne yazık ki, bu çözüm hala paddingebeveyn tarafından ayarlanan bilinmesini gerektiriyor .

— ToolmakerSteve

1

Sorun, kullandığınız kutu modeline bağlı olabilir. IE kullanıyor musunuz?

IE tuhaf moddayken, widthkutunuzun dış genişliğidir, bu da dolgunun içeride olacağı anlamına gelir. Yani kutunun içinde kalan toplam alan 100px - 2 * 10px = 80px, bu durumda 100px genişliğiniz <hr>doğru görünmeyecektir.

Standartlar modundaysanız, widthkutunuzun iç genişliği ve dolgu dışarıya eklenir. Yani kutunun toplam genişliği, 100px + 2 * 10px = 120pxsizin için kutunun içinde tam olarak 100 piksel bırakıyor <hr>.

Çözmek için ya IE için CSS değerlerinizi ayarlayın. (Orada iyi görünüp görünmediğini görmek için Firefox'ta kontrol edin). Daha da iyisi, tarayıcıyı katı moda geçirmek için bir belge türü ayarlayın - burada IE de standart kutu modelini takip eder.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

— Martin Algesten
kaynak

1

Dikey dolgulu bir ana kabınız varsa ve bu kabın içinde bir şeyin (örneğin bir görüntü) dikey dolgusunu yok saymasını istiyorsanız, hem 'üst' hem de 'alt' için negatif ama eşit bir kenar boşluğu ayarlayabilirsiniz:

margin-top: -100px;
margin-bottom: -100px;

Gerçek değer pek önemli görünmüyor. Bunu yatay dolgular için denemedim.

— Marnix.hoh
kaynak

0

kolay düzeltme .. üst div'e ekle:

kutu boyutlandırma: border-box;

— Jaclyn U
kaynak

0

İşte bunu yapmanın başka bir yolu.

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

İşte repl.it ile ilgili bazı örnekler: https://repl.it/@bryku/LightgrayBleakIntercept

— Dillon Burnett
kaynak