rumah > Microsoft > li css margin. Cara menghapus padding dari elemen HTML. Cara menghapus padding dari tepi halaman HTML


li css margin. Cara menghapus padding dari elemen HTML. Cara menghapus padding dari tepi halaman HTML




Pada artikel ini saya ingin memberi tahu Anda cara mengatur dengan benar bidang(melapisi) dan lekukan(margin) di CSS.

Pertama-tama, mari kita mengingat kembali definisi margin dan padding menurut spesifikasi W3C. Pada model kotak, margin adalah jarak antara isi (content) dan batas blok (border). Dan padding adalah jarak antara batas blok dan batas elemen yang berdekatan atau induk.

Dengan demikian, jika border dan background elemen tidak diatur, maka tidak ada perbedaan apakah akan menggunakan properti padding atau margin untuk mengatur indentasi, tetapi asalkan lebar (width) dan tinggi (height) elemen tidak atur dan algoritme penghitungan ukuran konten tidak diubah menggunakan properti ukuran kotak.

Bagaimanapun, perlu diingat bahwa margin mungkin termasuk atau tidak termasuk dalam lebar atau tinggi elemen. Indentasi selalu diatur di luar elemen.

Sekarang mari kita lihat cara mengatur margin dan indentasi antar elemen dengan benar. Mari kita ambil blok berikut sebagai contoh.

Ini adalah blok berita. Ini terdiri dari tajuk utama, daftar berita, dan tautan "Berita lainnya". Mari beri mereka nama kelas berikut: news_title , news__list , dan news__more-link .

Berita

Berita lainnya

Karena masing-masing elemen ini memiliki bantalan kiri dan kanan yang sama, lebih baik menyetel margin pada blok induk, daripada menyetel bantalan kiri dan kanan untuk setiap elemen secara terpisah.

Berita ( padding: 20px 25px; )

Jadi, jika perlu, ubah nilai bidang di kanan dan kiri, ini perlu dilakukan Dalam satu tempat. Dan saat menambahkan elemen baru di dalam blok berita, itu sudah memiliki lekukan yang diperlukan di kiri dan kanan.

Sering terjadi bahwa semua elemen di dalam blok memiliki bantalan yang sama di kiri dan kanan, kecuali satu yang seharusnya tidak memiliki bantalan sama sekali, misalnya karena latar belakang. Dalam hal ini, padding negatif dapat diatur untuk elemen tersebut. Maka Anda tidak perlu menghapus margin di dalam blok untuk elemen lainnya.

Sekarang Anda perlu mengatur indentasi vertikal antar elemen. Untuk melakukan ini, Anda perlu menentukan elemen mana yang ada wajib. Jelas, blok berita tidak bisa ada tanpa daftar berita, sementara pada saat yang sama mungkin tidak ada tautan "Berita lain", judulnya juga bisa dihapus, misalnya saat mengubah desain.

Dengan mengingat hal ini, kami menetapkan indentasi dari bawah untuk judul, dan indentasi dari atas untuk tautan "Berita Lain".

News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )

Kita dapat mencapai hasil eksternal yang sama dengan menambahkan padding di bagian atas dan bawah daftar berita.

News__list ( margin: 10px 0 12px 0; )

Sekarang Anda perlu mengatur indentasi di antara setiap item berita. Sekali lagi, Anda perlu memperhitungkan bahwa jumlah item berita dapat berubah, dan hanya ada satu item dalam daftar.

Anda dapat mengatur untuk setiap berita kecuali inden pertama dari atas, atau untuk setiap berita kecuali inden terakhir dari bawah. Opsi pertama lebih disukai karena :first-child pseudo-selector ditambahkan dalam spesifikasi CSS 2.1 dan memiliki dukungan yang lebih luas daripada :last-child pseudo-selector, yang hanya ditambahkan dalam spesifikasi CSS versi 3.0.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

Dengan demikian, pengaturan margin dan indentasi yang benar memungkinkan Anda mengubah tampilan blok apa pun secara fleksibel tanpa mengubah gaya dan tanpa melanggar desain. Yang paling penting adalah menentukan elemen blok mana yang utama ( wajib), dan yang mana opsional.

Terkadang kita tidak dapat mengandalkan elemen yang diperlukan. Misalnya, kami memiliki jendela sembulan yang dapat menampilkan beberapa judul dan teks di dalamnya. Selain itu, dalam beberapa kasus mungkin tidak ada teks, dan dalam beberapa kasus mungkin tidak ada judul. Artinya, kedua elemen itu opsional.

Dalam hal ini, Anda dapat menggunakan metode pengaturan indentasi berikut.

Popup__header + .popup__text ( margin-top: 15px; )

Maka indentasi hanya akan muncul jika kedua elemen digunakan. Dalam hal hanya menampilkan judul atau teks saja, tidak akan ada indentasi tambahan.

Meruntuhkan margin vertikal

Nuansa lain yang tidak diketahui semua orang terkait dengan lekukan vertikal antar blok yang berdekatan. Dalam definisi lekukan yang saya berikan di atas, dikatakan bahwa lekukan adalah jarak antar perbatasan blok saat ini dan tetangga. Jadi jika kita menempatkan dua kotak satu di bawah yang lain dan memberi salah satunya padding bawah 30px dan yang lainnya padding atas 20px, padding di antara keduanya tidak akan menjadi 50px , tetapi 30px .

Artinya, indentasi akan tumpang tindih, dan indentasi antar blok akan sama dengan indentasi terbesar, dan bukan jumlah indentasi. Efek ini juga disebut "runtuh".

Harap perhatikan bahwa lekukan horizontal, tidak seperti lekukan vertikal, tidak "menciutkan", tetapi diringkas. Bidang (padding) juga diringkas.

Mengetahui tentang "runtuhnya" indentasi, kita dapat menggunakan fitur ini untuk keuntungan kita. Misalnya, jika kita perlu mengatur indentasi untuk heading dan teks di dalam artikel, maka untuk heading level pertama kita akan mengatur indentasi dari bawah menjadi 20px , dan untuk heading level kedua indentasi dari atas adalah 20px dan dari bawah 10px , dan untuk semua paragraf kita akan mengatur indentasi dari atas menjadi 10px .

h1 ( margin-bawah: 24px; ) h2 ( margin-atas: 24px; margin-bawah: 12px; ) p ( margin-atas: 12px; )

Sekarang heading h2 dapat ditempatkan setelah heading h1 dan setelah paragraf. Bagaimanapun, padding atas tidak akan melebihi 24px .

Aturan umum

Kesimpulannya, saya ingin membuat daftar aturan yang saya ikuti saat mengatur margin dan indentasi.

  1. Jika elemen yang berdekatan memiliki bantalan yang sama, maka lebih baik menyetelnya ke wadah induk, dan bukan ke elemennya.
  2. Saat menyetel indentasi antar elemen, Anda harus mempertimbangkan apakah elemen ini wajib atau opsional.
  3. Untuk daftar elemen dengan tipe yang sama - jangan lupa bahwa jumlah elemen dapat bervariasi.
  4. Berhati-hatilah saat menerapkan padding vertikal dan gunakan fitur ini jika akan berguna.

Tag: Tambahkan tag

Tugas

Hapus bantalan di sekitar daftar berpoin atau bernomor.

Larutan

Gunakan margin dan padding gaya null untuk pemilih UL atau OL, bergantung pada jenis daftar, seperti yang ditampilkan dalam contoh 1.

Contoh 1: Membuat Indentasi Daftar

HTML5 CSS 2.1 IE Cr Op Sa Fx

Cantumkan indentasi

  • Cheburashka
  • Gena Buaya
  • Shapoklyak

Hasil dari contoh ini ditunjukkan pada Gambar. 1.

Beras. 1. Daftar tanpa lekukan vertikal dan horizontal

Perhatikan bahwa penanda daftar yang muncul di tepi kiri halaman web menghilang. Untuk menghapus padding atas dan bawah saja tanpa menggeser daftar ke kiri, gunakan properti margin-top dan margin-bottom (contoh 2).

Contoh 2: Membuat Indentasi Daftar

HTML5 CSS 2.1 IE Cr Op Sa Fx

Cantumkan indentasi

  • Cheburashka
  • Gena Buaya
  • Shapoklyak

Blok inline (inline-block) dalam banyak kasus merupakan alat markup yang sangat nyaman. Contoh penggunaannya dapat ditemukan di artikel,.

Pada saat yang sama, jebakan dikaitkan dengan mereka. Saya bahkan akan mengatakan seluruh batu besar. Apakah Anda ingin melihatnya? Letakkan beberapa elemen sebaris (atau blok sebaris) dalam satu baris.

Katakanlah kita memiliki HTML ini:

  • Storoki.
  • Hanya
  • baris

Membuat elemen sebaris:

li(tampilan:sebaris;)

...atau blok sebaris:

Li( display:inline-block; /* Dua baris berikutnya untuk IE6-7 - meniru perilaku blok inline*/ //display:inline; zoom:1; )

Masalah

Sebagian besar browser memisahkan blok inline (elemen) dengan indentasi. Untuk memudahkan persepsi, saya sedikit mewarnai balok.

Ups! Apa itu retret? Saya tidak menulis hal seperti itu!

Mari kita setuju bahwa selanjutnya saya hanya akan menulis "blok inline", dan berarti "blok inline (:inline-block) atau hanya elemen inline (tampilan:inline)", karena mereka memiliki masalah yang sangat umum dan juga diperlakukan dengan cara yang sama jalan.

Siapa yang kita rawat?

Jadi blok inline mendapat lekukan misterius. Tentu saja, ini tidak hanya berlaku untuk daftar. Grup yang disusun dalam satu baris, misalnya, "ov.

Agar adil, IE6 dan IE7 merender semuanya tanpa padding:

Begitulah cara saya ingin semua browser ditampilkan!

Kami tidak akan membahas detail pertanyaan tentang siapa yang benar dan siapa yang harus disalahkan (baca - mendukung standar secara tidak benar), kami hanya akan mencapai kompatibilitas lintas-browser. Sangat nyaman jika perilakunya dapat diprediksi - saya tidak menyetel lekukan apa pun, yang berarti saya tidak perlu menggambarnya!

Faktanya, semuanya sederhana - untuk menghapus indentasi, Anda perlu memahami dari mana asalnya!

Retret dari mana?

Dan itu tidak sulit untuk dipahami. Cukup menulis tag dalam satu baris:

  • Storoki.
  • Hanya
  • baris

Keajaiban! Indentasi menghilang dengan sendirinya! Kesimpulan: mereka menghasilkan karakter yang tidak terlihat di antara tag - jeda atau spasi.

Tentu saja, "menulis semuanya dalam satu baris", meskipun ini adalah solusi lintas-browser untuk masalah tersebut, tidak dipertimbangkan di sini, karena alasan yang jelas (yah, siapa yang menulis tanpa indentasi?). Mencari cara lain.

Turun dengan retret!

Karena padding membuat karakter dari wadah, ada baiknya untuk "menjinakkan" karakter tersebut dengan menyetelnya ke :0; (hal utama adalah jangan lupa bahwa properti ini diwariskan dan bunuh untuk keturunannya sendiri):

Ul( ukuran font:0; ) li( ukuran font:14px; tampilan: sebaris; )

Solusi sempurna! Blok inline benar-benar menempel satu sama lain. Masih ada masalah kosmetik kecil: di beberapa browser (misalnya, di Opera 9.5 dan sebelumnya), padding terlihat di atas atau di bawah induk (induk pada gambar diisi dengan abu-abu pucat):

Gambar telah diperbesar untuk menunjukkan margin vertikal.

Masalah ini mirip dengan yang dijelaskan dalam artikel, dan diperlakukan dengan cara yang hampir sama: tambahkan: 0; (sekali lagi, jangan lupa blokir keturunannya). Jadi kita mendapatkan:

Ul( font-size:0; line-height:0; ) li( font-size:14px; line-height:normal; /* atau apa pun yang sesuai */ display:inline; )

Sekarang semuanya baik dan indah? Itu tidak ada!

Masalah datang dari tempat yang tidak mereka duga

Sepertinya indentasi ini benar-benar harus! Untuk mendukung ini, ada dua argumen kuat:

  1. mereka tidak ditarik oleh IE6-7;
  2. mereka masih ditarik oleh browser Webkit terlepas dari upaya kami.

Ya ya! Baik Safari dan Chrome, setelah semua trik di atas, berkenan untuk mengurangi padding dari tiga piksel menjadi satu!

Webkit yang keras kepala tidak mau menyerah!

Perbarui 3.07.2011 oleh Nick. Kejutan tersembunyi lainnya datang dari FF. Saat menskalakan halaman, terkadang ada tambahan margin 1px di bagian atas. Ini diperlakukan dengan menambahkan aturan display: -moz-inline-stack;

keputusan akhir

Dimungkinkan untuk mengatasi webkit dengan bantuan :-1px Pada saat yang sama, tidak ada efek samping berbahaya yang ditemukan (kecuali, tentu saja, kami lupa mengganti properti di keturunan).

css terakhir dengan solusi crossbrowser untuk elemen inline:

Ul( font-size:0; /* menghapus padding horizontal */ line-height:0; /* ...dan padding vertikal di beberapa browser */ letter-spacing:-1px; /* meyakinkan webkit */ ) li ( font-size:14px; /* Jangan lupa mengembalikan nilai normal */ line-height:normal; letter-spacing:normal; display:inline; )

Untuk blok sebaris:

Ul( font-size:0; /* menghapus padding horizontal */ line-height:0; /* ...dan padding vertikal di beberapa browser */ letter-spacing:-1px; /* meyakinkan webkit */ ) li ( font-size:14px; /* Jangan lupa mengembalikan nilai normal */ line-height:normal; letter-spacing:normal; display: -moz-inline-stack!important; display:inline-block; / /tampilan:sebaris ;perbesar:1; )

Jangan lupa bahwa properti zoom tidak valid. Oleh karena itu, dalam kondisi pertempuran, keluarkan ke dalam CSS terpisah, sambungkan menggunakan .

Saat membuat blok dengan daftar tautan, umumnya disarankan untuk menggunakan properti tampilan dengan atribut blok atau blok sebaris, yang akan menambah ukuran bidang tautan aktif. Bidang tautan aktif yang besar meningkatkan kegunaan elemen, elemen besar lebih mudah dipukul dengan mouse.


Elemen dengan tampilan: blok dirender sebagai elemen blok.
Elemen dengan display: inline-block dirender sebagai elemen tingkat blok yang membungkus elemen lain sebagai inline. Konten diformat sebagai elemen blok, dan elemen itu sendiri diformat sebagai sebaris.

Pertimbangkan contoh sederhana dengan daftar tautan:

Jika Anda tidak mengubah gaya tautan, maka ukuran bidang aktifnya sesuai dengan ukuran teks di dalamnya.


Kita dapat meningkatkannya dengan mengubah ukuran bidang aktif menjadi lebar elemen induk.

Ul a ( tampilan: blok; )

Kita bisa melakukan lebih baik lagi.

  1. Pastikan item daftar tidak memiliki margin, tidak seperti tautan.
  2. Tautan tidak memiliki padding luar, karena padding tersebut bukanlah area aktif elemen.
ul li ( padding: 0; margin: 0; ) ul a ( padding: 5px; display: block; )

Artikel tersebut terdiri dari hal-hal yang jelas, tetapi kita sering dapat menemukan blok tautan di Internet yang tidak "dirusak" oleh bidang aktif yang diperbesar.


Artikel asli: Jauhkan Margin dari Daftar Tautan Oleh: Chris Coyier pada 29/11/2010