Abaikan padding orang tua

127

Saya mencoba mendapatkan aturan horizontal saya untuk mengabaikan padding induk.

Inilah contoh sederhana dari apa yang saya miliki:

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

Anda akan menemukan bahwa aturan horizontal meluas keluar dari induk sebesar 10px. Saya mencoba membuatnya mengabaikan padding yang dibutuhkan semua hal lain di div induk.

Saya sadar bahwa saya bisa membuat div terpisah untuk yang lainnya; ini bukanlah solusi yang saya cari.

html css

— Sam
sumber

160

Perbaikan mudah, lakukan saja

margin:-10px

di jam.

— Sam
sumber

9

Ini berfungsi, tetapi masalahnya adalah itu tidak akan memperpanjang panjang penuh div induk. Ini karena padding TIDAK termasuk dalam lebar 100px, ini berarti lebar sebenarnya 120px, dan Anda <hr>akan menjadi 20px dari akhir div Anda. Lihat jsFiddle ini untuk apa yang saya maksud: jsfiddle.net/YVrWy/1

— Alastair Pitts

Ya saya mengerjakannya saat saya menambahkannya; lebarnya tidak relevan.

— Sam

22

jika Anda membutuhkan lebar 100% cukup gunakan auto sebagai atribut lebar. Lebar akan dihitung sehubungan dengan margin yang diberikan.

— schlingel

4

Anda harus melakukan sesuatu seperti ... margin: 0 -15px; ..... jika tidak jam akan secara vertikal menyedot konten yang berdekatan ke arahnya.

— honkskillet

agak hackish. berharap ada cara yang lebih baik

— oldboy

29

Untuk tujuan gambar, Anda dapat melakukan sesuatu seperti ini

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

— adriancho5692
sumber

8

Tetapi bagaimana jika Anda belum tentu tahu padding orang tua?

1

Ini bekerja untuk saya saat saya menggunakan min-width, bukan hanya lebar.

— Pedro Nadolny

@ user5707327 Anda selalu dapat menggabungkan gaya dengan javascript untuk mendapatkan padding orang tua

— adriancho5692

wow, penggunaan lebar negatif yang jenius!

— Mr PizzaGuy

9

Secara umum, pertanyaan ini telah dijawab tetapi sebagian kecil oleh semua orang. Saya menangani ini beberapa menit yang lalu.

Saya ingin memiliki baki tombol di bagian bawah panel di mana panel memiliki 30px di sekelilingnya. Baki kancing harus rata di bagian bawah dan samping.

.panel
{
  padding: 30px;
}

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

Saya melakukan demo di sini dengan lebih banyak daging untuk mendorong ide. Namun elemen kunci di atas mengimbangi setiap padding induk dengan margin negatif yang cocok pada anaknya. Kemudian yang paling penting jika Anda ingin menjalankan anak dengan lebar penuh lalu atur lebar ke otomatis. (seperti yang disebutkan dalam komentar di atas oleh schlingel ).

— Mitchell Geere
sumber

7

Agak telat. Tapi hanya butuh sedikit matematika.

.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>

Saya tidak memiliki Windows jadi saya tidak menguji ini di IE.

biola: contoh biola ..

— sqram
sumber

1

Anda harus membagi padding-right: 60px menjadi padding-left: 30px; padding-right: 30px, sehingga konten tidak diimbangi saat Anda menggunakan text-align: center;

— Lukas

3

margin: 0 -10px;

lebih baik dari

margin: -10px;

Nanti menyedot konten secara vertikal ke dalamnya.

— honkskillet.dll
sumber

2

Orang tua Anda lebarnya 120px - yaitu lebar 100 + 20 padding di setiap sisi sehingga Anda perlu membuat garis Anda lebar 120px. Ini kodenya. Lain kali perhatikan bahwa padding menambah lebar elemen.

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

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

— easwee
sumber

1

Dengan lebar yang ditentukan itu mudah. Masalahnya adalah ketika Anda tidak tahu lebar

— Guilherme Ferreira

@GuilhermeFerreira Gunakan width: auto;dalam hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Sayangnya, solusi ini masih membutuhkan pengetahuan yang paddingditetapkan oleh orang tua.

— ToolmakerSteve

1

Masalahnya bisa pada model kotak mana yang Anda gunakan. Apakah Anda menggunakan IE?

Ketika IE dalam mode quirks, widthadalah lebar luar kotak Anda, yang berarti padding akan berada di dalam. Jadi total area yang tersisa di dalam kotak 100px - 2 * 10px = 80pxdalam hal ini lebar 100px Anda <hr>tidak akan terlihat benar.

Jika Anda berada dalam mode standar, widthadalah lebar bagian dalam kotak Anda, dan bantalan ditambahkan di luar. Jadi total lebar kotak 100px + 2 * 10px = 120pxmenyisakan 100px tepat di dalam kotak untuk Anda <hr>.

Untuk mengatasinya, sesuaikan nilai CSS Anda untuk IE. (Periksa di Firefox untuk melihat apakah terlihat baik-baik saja di sana). Atau bahkan lebih baik, atur jenis dokumen untuk menendang browser ke mode ketat - di mana IE juga mengikuti model kotak standar.

<!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
sumber

1

Jika Anda memiliki wadah induk dengan bantalan vertikal dan Anda ingin sesuatu (misalnya gambar) di dalam wadah itu mengabaikan bantalan vertikalnya, Anda dapat menetapkan margin negatif, tetapi sama, untuk 'atas' dan 'bawah':

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

Nilai sebenarnya tampaknya tidak terlalu penting. Belum mencoba ini untuk bantalan horizontal.

— Marnix.hoh
sumber

0

perbaikan mudah .. tambahkan ke div induk:

ukuran kotak: border-box;

— Jaclyn U
sumber

0

Berikut cara lain untuk melakukannya.

<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>

Berikut beberapa contoh di repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Dillon Burnett
sumber