Semua elemen yang muncul pada halaman HTML tidak lebih dari persegi panjang. Dan pada dasarnya hanya ada dua jenis:

1. balok (blok), yang menempati seluruh lebar tempatnya berada, dan terpisah dari apa yang ada di atas dan di bawahnya. Misalnya, ini adalah tag DIV, P, H.
2. bawaan (sebaris). Misalnya SPAN, KUAT, EM, A dan IMG.

tabel.

Peran properti meningkat setelah transisi dari tata letak tabel ke tata letak div. Hal ini karena float memungkinkan pengembang web untuk memasukkan kolom tanpa harus menggunakan tabel. Itu bisa membutuhkan nilai Kanan, kiri, tapi tidak tengah.

Menggunakan properti display: block; atau tampilan: sebaris; kami mengonversi satu jenis persegi panjang ke jenis persegi panjang lainnya. Misalnya, daftar UL yang memiliki sejumlah blok LI dapat disusun secara horizontal:

• AYAT
• AYAT
• AYAT

• AYAT
• AYAT
• AYAT

Saat menggunakan properti mengapung persegi panjang itu balok, tetapi dengan fitur karakteristik: Lebarnya tidak akan mencakup keseluruhan konten. Misalnya, header h3 terlihat seperti:

ini HEADER h3

ini HEADER h3

ini HEADER h3

ini HEADER h3

Teks teratas tetap tidak berubah karena elemen mengambang tidak dapat ditempatkan di atas garis pembuatannya.

ini HEADER h3

Tapi teks merahnya ada di bawah judul dan akan mengalir mengelilinginya, tanpa ada apapun gaya tambahan. Dan hanya ketinggian h3 yang akan diatasi, halaman akan kembali ke tatanan aslinya.

A B C D Beberapa elemen mengambang akan mengikuti urutan lokasinya.

ABDI DALAMG teks...

A B C D Jika kita berjalan sehingga aliran di sekitar elemen berhenti dengan momen tertentu(dari sini), properti clear diterapkan. Kita dapat menambahkannya ke tag kosong

Untuk menempatkan beberapa blok persegi panjang secara merata, kami memberinya lebar yang sama.

Tata letak tabel sangat nyaman dan mudah dimengerti, mungkin itulah sebabnya tampilan analognya: tabel; Formulir yang sama diperoleh dengan kode yang lebih sedikit.

Sekarang Anda dapat melihat bagaimana galeri gambar dibuat. Saya harap tidak ada yang lupa.

teks...

teks...

Block layout sering digunakan saat membuat website atau blog. Sebagai konsekuensinya, sering kali perlu membuat indentasi blok. Untuk alasan ini, tentang cara membuat indentasi di CSS dijelaskan secara rinci di pelajaran ini. Bagi browser, setiap tag adalah wadah yang memiliki konten, padding, margin eksternal, serta bingkai. Dalam pelajaran ini kita akan belajar cara membuat indentasi internal dan eksternal, dan mempertimbangkan parameter utamanya.

Gambar di bawah dengan jelas menunjukkan parameter indentasi blok:

Seperti yang Anda lihat, indentasi dapat dibuat dalam empat arah: indentasi atas (atas), indentasi bawah (bawah), indentasi kiri (kiri) dan indentasi kanan (kanan). Satuan pengukurannya bisa berupa piksel, persentase, dan lain-lain. Unit CSS— lebih banyak tentang mereka. Tutorial ini menggunakan piksel.

Blokir bantalan

Untuk lapisan di CSS propertinya sesuai lapisan. Jadi, mari kita lihat contoh pengaturan padding internal untuk sebuah blok:

padding-atas: 5px; /*padding atas*/ padding-kiri: 8px; /*padding kiri*/ padding-kanan: 8px; /*padding kanan*/ padding-bawah: 5px; /*bantalan bawah*/

DI DALAM dalam contoh ini Bantalan internal diatur secara terpisah untuk setiap sisi blok. Selain itu, ada beberapa cara untuk mengatur indentasi di CSS:

margin: 5px 8px 5px 8px; /*margin atas, kanan, bawah, kiri*/ margin: 5px 8px 5px; /*menjelaskan margin atas, kiri, kanan, bawah*/ margin: 5px 8px; /*menjelaskan margin atas dan bawah, kanan dan kiri*/ margin: 7px; /*menjelaskan semua margin internal 7px*/

Lebih mudah untuk mengingat yang pertama dan cara terakhir. Dalam kasus pertama, lekukan ditempatkan searah jarum jam (atas, kanan, bawah, kiri) - kita dapat menentukan jumlah lekukan berapa pun, bergantung pada kasus terakhir lekukan di semua sisi akan sama.

Blokir margin

Properti yang bertanggung jawab atas margin dalam CSS adalah batas. Contoh margin di CSS:

margin-atas: 5px; /*margin atas*/ margin-kiri: 10px; /*margin kiri*/ margin-kanan: 10 piksel; /*margin kanan*/ margin-bawah: 5px; /*margin bawah*/

bantalan: 5px 10px 5px 10px; /*margin atas, kanan, bawah, kiri*/ padding: 5px 10px 5px; /*menjelaskan padding atas, kiri dan kanan, bawah*/ padding: 5px 10px; /*menjelaskan padding atas dan bawah, kanan dan kiri*/ padding: 7px; /*menjelaskan semua margin 7px*/

Dengan demikian, cara membuat indentasi di CSS- pertanyaannya tidak sulit, tapi sangat relevan. Untuk lebih memahami informasi yang dijelaskan di atas, Anda harus ingat bahwa ada dua properti: padding - indentasi internal dan margin - indentasi eksternal. Selain itu, seperti yang sudah Anda ketahui, ada beberapa cara untuk mengatur indentasi, Anda bisa menggunakannya.

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

Pada saat yang sama, ada jebakan yang terkait dengan mereka. Saya bahkan akan mengatakan seluruh batu bulat. Apakah kamu ingin menemuinya? Tempatkan beberapa elemen sebaris (atau blok sebaris) dalam satu baris.

Katakanlah kita memiliki HTML ini:

• Bangau.
• Hanya
• garis

Membuat elemen menjadi huruf kecil:

Li( tampilan: sebaris; )

...atau blok garis:

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

Masalah

Kebanyakan browser memisahkan blok (elemen) sebaris dengan lekukan. Untuk memudahkan persepsi, saya mewarnai balok-balok itu sedikit.

Ups! Lekukan seperti apa? Saya tidak meresepkan hal seperti itu!

Mari kita sepakat bahwa selanjutnya saya hanya akan menulis "blok inline", dan maksudnya adalah "blok inline ( :inline-block) atau hanya elemen inline (display:inline)", karena keduanya memiliki masalah yang sangat umum dan juga ditangani dengan cara yang sama. jalan.

Siapa yang kita obati?

Jadi blok sebaris sekarang memiliki lekukan misterius. Tentu saja, ini tidak hanya berlaku pada daftar. Grup yang terletak dalam satu baris, misalnya “ov”, akan berperilaku sama.

Agar adil, perlu dicatat bahwa IE6 dan IE7 akan membuat semuanya tanpa lekukan:

Ini adalah tampilan yang saya ingin semua browser!

Kami tidak akan merinci pertanyaan tentang siapa yang benar dan siapa yang salah (baca - mendukung standar secara tidak benar), kami hanya akan mencapai kompatibilitas lintas-browser. Sangat nyaman bila perilakunya dapat diprediksi - saya tidak menetapkan indentasi apa pun, yang berarti saya tidak perlu menggambarnya!

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

Dari manakah asal lekukan tersebut?

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

• Bangau.
• Hanya
• garis

Keajaiban! Lekukannya hilang dengan sendirinya! Kesimpulan: mereka menghasilkannya karakter yang tidak terlihat antar tag - tanda hubung atau spasi.

Tentu saja, “menulis semuanya dalam satu baris”, meskipun ini merupakan solusi lintas-browser untuk masalah tersebut, tidak dipertimbangkan di sini, karena alasan yang jelas (siapa yang menulis tanpa indentasi?). Kami mencari cara lain.

Turun dengan lekukan!

Karena lekukan dibuat oleh karakter dari wadah, ide yang masuk akal adalah “menetralisir” karakter ini - atur ke :0; (yang utama jangan lupa bahwa harta ini diwariskan dan disita untuk keturunannya sendiri):

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

Solusi hebat! Blok-blok garis tersebut benar-benar saling menempel. Masih ada sedikit masalah tampilan: di beberapa browser (misalnya, Opera 9.5 dan versi lebih lama) terdapat lekukan di bagian atas atau bawah di dalam induknya (induk pada gambar diisi dengan warna abu-abu kehijauan pucat):

Gambar telah diperbesar sehingga lekukan vertikal dapat terlihat

Masalah ini mirip dengan yang dijelaskan dalam artikel, dan ditangani dengan cara yang kurang lebih sama: tambahkan :0; (sekali lagi, jangan lupa tumpang tindih dengan keturunannya). Jadi kita mendapatkan:

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

Apakah semuanya baik-baik saja dan keren sekarang? Tidak begitu!

Masalah datang dari tempat yang tidak kita duga

Rupanya, lekukan ini memang seharusnya ada! Ada dua argumen kuat yang mendukung hal ini:

1. IE6-7 tidak menggambarnya;
2. Terlepas dari upaya kami, browser Webkit masih menariknya.

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

Webkit yang keras kepala tidak mau menyerah!

Pembaruan 3.07.2011 oleh Nick.

FF kembali menghadirkan kejutan tersembunyi. Jika Anda menskalakan halaman, terkadang ada tambahan padding 1px di bagian atas. Ini dapat diatasi dengan menambahkan aturan tampilan: -moz-inline-stack;

Keputusan akhir

Dimungkinkan untuk mengatasi webkit menggunakan :-1px. Namun, tidak ditemukan efek samping berbahaya (kecuali, tentu saja, Anda lupa mengganti properti di keturunannya).

Ul( font-size:0; /* hapus spasi horizontal */ tinggi garis:0; /* ...dan vertikal di beberapa browser */ spasi huruf:-1px; /* yakinkan webkit */ ) li ( font -size:14px; /* Jangan lupa mengembalikan nilai normal */ line-height:normal;

Untuk blok sebaris:

Ul( font-size:0; /* hapus spasi horizontal */ tinggi garis:0; /* ...dan vertikal di beberapa browser */ spasi huruf:-1px; /* yakinkan webkit */ ) li ( font -size:14px; /* Jangan lupa untuk mengembalikan nilai normal */ line-height:normal; letter-spacing:normal; tampilan: sebaris; perbesar: 1;

Jangan lupa bahwa properti zoom tidak valid. Oleh karena itu, dalam kondisi pertempuran, letakkan di CSS terpisah, dihubungkan menggunakan .

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

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

Jadi, jika batas dan latar belakang elemen tidak ditentukan, maka tidak ada perbedaan, gunakan properti padding atau margin untuk mengatur indentasi, tetapi dengan syarat lebar (width) dan tinggi (height) elemen tidak ditentukan. dan algoritma untuk menghitung ukuran konten menggunakan properti ukuran kotak.

Bagaimanapun, ingatlah bahwa margin mungkin disertakan atau tidak dalam lebar atau tinggi elemen. Indentasi selalu diatur di luar elemen.

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

Ini adalah blok berita. Ini terdiri dari header, daftar berita, dan link “Berita lainnya”. Mari kita berikan kepada mereka judul berikut kelas: news__title , news__list dan news__more-link .

Karena masing-masing elemen ini memiliki lekukan yang sama kiri dan kanan, maka lebih baik mengatur margin untuk blok induk, daripada mengatur margin kiri dan kanan untuk setiap elemen secara terpisah.

Berita ( padding: 20px 25px; )

Jadi, jika Anda perlu mengubah nilai kolom di kanan dan kiri, hal ini perlu dilakukan di satu tempat. Dan ketika menambahkan elemen baru di dalam blok berita, elemen tersebut sudah memiliki lekukan yang diperlukan di kiri dan kanan.

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

Sekarang Anda perlu mengatur margin vertikal antar elemen. Untuk melakukan ini, Anda perlu menentukan elemen mana yang ada wajib. Jelasnya, blok berita tidak bisa ada tanpa daftar berita; pada saat yang sama, mungkin tidak ada tautan “Berita lainnya”; judulnya juga bisa dihilangkan, misalnya saat desain diubah.

Dengan mempertimbangkan hal ini, kami menetapkan indentasi di bagian bawah untuk judul, dan indentasi di atas untuk tautan “Berita lainnya”.

Berita__judul ( margin-bawah: 10px; ) .news__more-link ( margin-atas: 12px; )

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

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

Sekarang Anda perlu mengatur indentasi antar item berita individual. Sekali lagi, harap dicatat bahwa jumlah berita mungkin berbeda dan mungkin hanya ada satu berita yang terdaftar.

Anda dapat mengatur indentasi atas untuk setiap berita kecuali yang pertama, atau indentasi bawah untuk setiap berita kecuali yang terakhir. Opsi pertama lebih disukai karena:pemilih semu anak pertama telah ditambahkan dalam spesifikasi CSS 2.1 dan memiliki dukungan yang lebih luas, tidak seperti pemilih semu:anak terakhir, yang hanya ditambahkan dalam spesifikasi CSS 3.0.

Item__daftar berita ( margin-top: 18px; ) .news__list-item:anak pertama ( margin-top: 0; )

Dengan demikian, penempatan margin dan indentasi yang benar memungkinkan Anda melakukan perubahan secara fleksibel penampilan blok apa pun tanpa membuat perubahan gaya dan tanpa pelanggaran desain. Yang terpenting adalah menentukan elemen blok mana yang utama ( wajib), dan yang mana opsional.

Terkadang kita tidak bisa mengandalkan elemen yang dibutuhkan. Misalnya, kita mempunyai jendela popup, di dalamnya beberapa judul dan teks dapat ditampilkan. Selain itu, dalam beberapa kasus mungkin tidak ada teks, dan dalam beberapa kasus mungkin tidak ada judul. Artinya, kedua elemen tersebut bersifat opsional.

Dalam hal ini Anda dapat menggunakan cara selanjutnya tugas lekukan.

Popup__header + .popup__text ( margin-atas: 15 piksel; )

Maka lekukan tersebut hanya akan muncul jika kedua elemen tersebut digunakan. Jika hanya menampilkan judul atau teks saja, tidak akan ada lekukan tambahan.

Runtuhnya margin vertikal

Nuansa lain yang tidak semua orang ketahui adalah terkait ruang vertikal antar blok yang berdekatan. Pengertian lekukan yang saya berikan diatas mengatakan bahwa lekukan adalah jarak antar perbatasan blok saat ini dan tetangganya. Jadi, jika kita menempatkan dua blok di bawah satu sama lain dan memberikan salah satunya margin bawah sebesar 30px dan yang lainnya margin atas sebesar 20px, margin di antara keduanya tidak akan menjadi 50px, melainkan 30px.

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

Harap dicatat bahwa indentasi horizontal, tidak seperti indentasi vertikal, tidak “runtuh”, tetapi diringkas. Bidang (padding) juga diringkas.

Mengetahui tentang keruntuhan indentasi, kita dapat menggunakan fitur ini untuk keuntungan kita. Misal kita perlu membuat indentasi pada judul dan teks di dalam sebuah artikel, maka untuk judul tingkat pertama kita akan mengatur indentasi bagian bawah menjadi 20px, dan untuk judul tingkat kedua, indentasi atas adalah 20px dan bagian bawah adalah 10px, dan untuk semua paragraf kita atur indentasi atasnya menjadi 10px.

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

Sekarang judul h2 dapat ditempatkan setelah judul h1 atau setelah paragraf. Bagaimanapun, margin atas tidak akan melebihi 24 piksel.

Aturan umum

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

1. Jika elemen yang berdekatan memiliki margin yang sama, lebih baik menyetelnya ke wadah induk, bukan ke elemen.
2. Saat mengatur indentasi antar elemen, Anda harus mempertimbangkan apakah elemen tersebut wajib atau opsional.
3. Untuk daftar elemen serupa, jangan lupa bahwa jumlah elemen bisa berbeda-beda.
4. Waspadai padding vertikal dan gunakan fitur ini jika akan menguntungkan Anda.

Tag: Tambahkan tag