Pelajari cara membuat indentasi teks dalam html. Margin dan border di CSS dengan margin, padding, dan border Html indent di semua sisi

Untuk tampilan elemen yang lebih indah pada halaman web, indentasi eksternal dan internal dalam css digunakan, dan sekarang kita akan menganalisisnya menggunakan contoh.

Setiap elemen, apakah itu paragraf, div, gambar atau video, adalah sejenis blok di mana Anda dapat membuat indentasi baik di dalam menggunakan properti padding maupun di luar menggunakan margin .

Properti untuk indentasi ini ditulis dalam css dengan cara ini (sebuah paragraf diambil sebagai contoh):

Alih-alih tag P, Anda tentu saja menulis elemen Anda, yang indentasinya akan diterapkan.

Pastikan untuk memahami dan mengingat bahwa untuk parameter margin dan padding, konstruksi indentasi untuk setiap sisi adalah sama.
Artinya, kami memiliki 4 nilai di setiap indentasi:

Nilai indentasi.

• Nilai pertama: indentasi dari atas;
• Nilai kedua: lekukan di sebelah kanan;
• Nilai ketiga: indentasi dari bawah;
• Nilai keempat: lekukan di sebelah kiri.

Dalam contoh ini, saya membuat margin margin di css dengan cara ini: Saya menulis 20px di atas, 10px di kiri dan kanan (biasanya sama untuk simetri), dan 30px di bawah.

Dan untuk padding, saya menentukan padding: 10px dari atas, kiri dan kanan, dan 14px dari bawah.

Nilai padding pada properti margin dan padding dapat dikurangi, asalkan memiliki jumlah yang sama.
Dari contoh saya, notasi yang disingkat sudah akan terlihat seperti ini:

Artinya, ketika tidak ada entri numerik terakhir, dalam hal ini untuk indentasi di sebelah kiri, browser secara otomatis mengganti nilai yang sama untuk indentasi di sebelah kiri dengan nilai di sebelah kanan.
Dan dalam kasus saya, indentasi di kanan dan kiri akan menjadi 10px di kedua margin dan padding .

Dan jika Anda memiliki nilai yang sama untuk margin atas dan bawah (misalnya: 16px ), dan nilai yang sama untuk margin kiri dan kanan (misalnya: 20px), maka entri akan memiliki singkatan yang lebih banyak lagi. membentuk:

Dengan demikian, untuk indentasi css, entri dibuat identik dengan yang ini.

Penerapan indentasi tunggal: untuk setiap sisi secara terpisah.

Properti nilai tunggal berikut digunakan untuk menentukan satu indentasi:

Properti bantalan untuk setiap sisi.

• margin-atas: 3px; lekukan atas luar;
• margin-kiri: 4px; lekukan kiri luar;
• margin-kanan: 6px; lekukan kanan luar;
• margin-bawah: 10px; margin bawah luar.

Dengan cara yang sama, entri ditulis untuk indentasi internal, hanya Anda yang perlu mengganti margin dengan padding .

Misalnya, Anda memiliki semua indentasi dalam css untuk semua gambar img.

Artinya (untuk klarifikasi) margin memiliki nilai berikut: 10px atas, kiri dan kanan: masing-masing 20px, dan 14px bawah.
Dan paddingnya adalah 6px di keempat sisinya.

Katakanlah Anda memutuskan untuk meletakkan gambar lain di halaman, tetapi untuk itu Anda hanya ingin mengubah margin atas, dan membiarkan sisanya apa adanya. Dan untuk menyelesaikan tugas ini, cukup mendaftarkan kelas untuk gambar ini, dan menambahkan entri tambahan ke css.

Akibatnya, gambar yang Anda tambahkan dengan kelas verx akan mengambil semua padding yang ditentukan dalam css untuk tag img, dan hanya mengubah padding luar untuk sisi atas (dalam kasus kami: 40px ).

Saya mencoba membuat deskripsi untuk indentasi css lebih detail, tetapi jika Anda memiliki pertanyaan, tanyakan melalui komentar.

Keterangan

Mengatur jumlah padding dari tepi kanan elemen. Indentasi adalah jarak dari tepi luar batas kanan elemen saat ini ke batas dalam elemen induknya (Gbr. 1).

Sintaksis

margin-kanan: nilai | otomatis | mewarisi

Nilai

Jumlah padding yang tepat dapat ditentukan dalam piksel (px), persentase (%), atau unit CSS lain yang dapat diterima. Nilainya bisa positif atau negatif.

Auto Menentukan bahwa ukuran padding akan dihitung secara otomatis oleh browser. mewarisi Mewarisi nilai dari orang tua.

HTML5 CSS2.1 IE Cr Op Sa Fx

Hasil dari contoh ini ditunjukkan pada Gambar. 2.

Beras. 2. Menerapkan properti margin-right

Model Objek

document.getElementById("elementID").style.marginRight

Browser

Internet Explorer 6 menggandakan padding kiri atau kanan untuk elemen mengambang yang bersarang di dalam elemen induk. Padding yang berdekatan dengan sisi induk digandakan. Masalahnya biasanya diselesaikan dengan menambahkan display: inline ke elemen mengambang.

Internet Explorer hingga versi 7.0 tidak mendukung nilai pewarisan.

Sumber daya web dievaluasi oleh pengguna menurut daya tarik eksternalnya. Oleh karena itu, bahkan teks yang berguna secara informasi tidak dapat dibaca karena kualitasnya buruk. Kesimpulan - Anda perlu hati-hati dan hati-hati mendekati tidak hanya konten semantik halaman situs, tetapi juga representasi visualnya. Munculnya teknologi CSS telah memperluas kemungkinan untuk membuat artikel yang menarik. Salah satu properti yang dirancang untuk membuat tulisan lebih mudah dibaca adalah indentasi teks CSS.

Margin dan padding: apa bedanya?

Sebelum Anda mulai memformat teks, Anda harus memahami apa itu margin dan indentasi. Terlepas dari kenyataan bahwa elemen markup ini dalam beberapa kasus terlihat sama bagi pengguna, ada perbedaan mendasar di antara mereka:

• bidang diatur oleh properti lapisan, indentasi - batas;
• margin ditentukan oleh celah antara konten dan batas blok, indentasi - antara batas blok yang berdekatan;
• Margin dapat diperhitungkan dalam ukuran elemen (lebar dan tinggi), atau tidak.

properti margin

Jadi, untuk mengatur lekukan horizontal atau vertikal teks CSS, gunakan konstruksi batas. Properti ini berlaku untuk tag mendefinisikan paragraf dokumen. Paling sederhana, ditulis sebagai:

margin: 12px

Baris ini berarti bahwa satu blok teks (atau blok lainnya) akan diindentasi di semua sisi sebesar 12 piksel. Untuk menambah interval, misalnya, tiga kali, cukup menulis:

margin: 36px

Tetapi bagaimana jika jarak antar balok harus berbeda di setiap sisi? Pengembang halaman web menggunakan beberapa bentuk notasi:

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

Pada contoh pertama, 11 piksel akan diindentasi dari batas bawah dan atas blok, dan 22 piksel akan diindentasi dari sisi blok. Menurut bentuk penulisan kedua, akan ada 11 piksel antara tepi atas blok dan konten, 33 piksel antara bagian bawah, dan 22 piksel di bagian samping. Dalam kasus ketiga, padding akan menjadi 11 piksel dari atas, 22 piksel dari kanan, 33 piksel dari bawah, dan 44 piksel dari kiri.

Dimungkinkan juga untuk mencatat jarak ke batas blok hanya di satu sisi: margin-atas, margin-bawah, margin-kiri, margin-kanan. Setelah menerjemahkan nama-nama properti ke dalam bahasa Rusia, mudah untuk menebak tujuannya. Misalnya, entri berikut mengatakan bahwa padding kanan akan menjadi 22 piksel:

margin-kanan: 22px

Untuk sisi lain, jarak di sekitar balok diambil sama dengan nilai elemen induk.

Properti batas memiliki fitur yang harus diingat pengembang saat menggunakan lekukan vertikal CSS. Interval elemen tetangga tidak dijumlahkan, tetapi ditumpangkan satu sama lain. Misalnya, biarkan salah satu balok memiliki margin-bawah: 15px, dan blok yang berdekatan dengannya dari bawah margin-atas: 35px. Aritmatika sekolah dan akal sehat menentukan bahwa total padding di antara mereka akan menjadi 50 piksel. Dalam praktiknya, ini tidak terjadi. Blokir dengan nilai properti yang besar batas"menyerap" tetangganya. Akibatnya, jarak antar elemen akan menjadi 35 piksel.

"Garis merah

Saat mendesain dokumen dalam editor teks, pengguna lebih suka mengatur setiap paragraf baru menggunakan garis "merah". Dengan CSS, lekukan teks di sebelah kiri mudah dilakukan - konstruksinya digunakan indentasi teks. Ini ditulis seperti ini:

indentasi teks: 11px.

Artinya, baris pertama paragraf akan digeser dari tepi kiri relatif sebesar 11 piksel. Untuk membuat teks pada halaman web lebih terlihat seperti dokumen di editor, Anda juga harus mengatur, yaitu menulis:

indentasi teks: 11px;

perataan teks: membenarkan.

Selain piksel, saat menjelaskan markup, diperbolehkan menggunakan unit lain - inci, poin, persentase. Biarkan blok memiliki indentasi teks CSS 10%. Dengan lebar blok 500 piksel, garis merah akan menjadi 50 piksel (10% dari 500).

Properti ini dapat diatur ke mewarisi. Catatan seperti itu mengatakan bahwa blok tersebut menggunakan properti serupa dari blok induk.

indentasi teks: mewarisi.

Anehnya, itu juga bisa mengambil nilai negatif! Dalam hal ini, apa yang disebut tepian terbentuk, yaitu, teks utama tetap di tempatnya, dan baris pertama digeser ke kiri sebesar 22 piksel:

indentasi teks: -22px.

Untuk mencegah huruf melewati batas kiri browser, selain indentasi teks anda perlu menggunakan konstruksi untuk mengatur bidang:

padding-kiri: 22px

Properti CSS utama yang perlu dipertimbangkan. Dan latihan akan membantu memperbaikinya. Berikut adalah beberapa tip terakhir tentang cara menerapkan apa yang telah Anda pelajari untuk pengembangan situs web Anda:

• garis merah dan lekukan teks adalah konsep yang berbeda, dan properti yang berbeda digunakan untuk menentukannya;
• untuk lekukan vertikal, aturan matematika tidak berlaku - interval ditumpangkan, elemen dengan nilai terbesar "menang";
• Indentasi paragraf negatif digunakan untuk menunjukkan baris pertama paragraf dengan gambar.

Dalam artikel ini saya ingin memberi tahu Anda cara mengatur dengan benar bidang(pelapis) dan lekukan(batas) dalam CSS.

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

Jadi, jika batas dan latar belakang elemen tidak diatur, maka tidak ada perbedaan apakah menggunakan properti padding atau margin untuk mengatur indentasi, tetapi asalkan lebar (lebar) dan tinggi (tinggi) elemen tidak diatur. set dan algoritme penghitungan ukuran konten tidak diubah menggunakan properti ukuran kotak.

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

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

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

Karena setiap elemen ini memiliki padding kiri dan kanan yang sama, yang terbaik adalah mengatur margin pada kotak induk daripada mengatur padding kiri dan kanan untuk setiap elemen satu per satu.

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 indentasi yang diperlukan di kiri dan kanan.

Sering terjadi bahwa semua elemen di dalam blok memiliki padding yang sama di kiri dan kanan, kecuali satu, yang seharusnya tidak memiliki padding 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 di antara elemen-elemen. Untuk melakukan ini, Anda perlu menentukan elemen mana yang wajib. Jelas, blok berita tidak dapat ada tanpa daftar berita, sementara pada saat yang sama mungkin tidak ada tautan "Berita lain", judulnya juga dapat dihapus, misalnya, ketika mengubah desain.

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

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

Kami 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 antara item berita individual. 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 indentasi pertama dari atas, atau untuk setiap berita kecuali indent terakhir dari bawah. Opsi pertama lebih disukai karena pseudo-selector :first-child telah ditambahkan dalam spesifikasi CSS 2.1 dan memiliki dukungan yang lebih luas, berbeda dengan pseudo-selector :last-child, 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 untuk secara fleksibel mengubah tampilan blok apa pun 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 bisa mengandalkan elemen yang dibutuhkan. Misalnya, kita memiliki jendela popup 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; )

Kemudian indentasi hanya akan muncul jika kedua elemen digunakan. Jika hanya menampilkan judul atau teks saja, tidak akan ada indentasi tambahan.

Menciutkan margin vertikal

Nuansa lain yang tidak semua orang tahu terkait dengan lekukan vertikal di antara blok yang berdekatan. Dalam definisi lekukan yang saya berikan di atas, dikatakan bahwa lekukan adalah jarak antara perbatasan blok saat ini dan tetangga. Jadi jika kita menempatkan dua kotak satu di bawah yang lain dan memberikan salah satunya padding bawah 30px dan yang lainnya padding atas 20px, padding di antara mereka 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 dicatat bahwa indentasi horizontal, tidak seperti yang vertikal, tidak "runtuh", tetapi diringkas. Bidang (padding) juga diringkas.

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

h1 ( margin-bottom: 24px; ) h2 ( margin-top: 24px; margin-bottom: 12px; ) p ( margin-top: 12px; )

Sekarang heading h2 dapat ditempatkan baik 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 padding yang sama, maka lebih baik untuk mengaturnya ke wadah induk, dan bukan ke elemen.
2. Saat menyetel indentasi antar elemen, Anda harus mempertimbangkan apakah elemen ini wajib atau opsional.
3. Untuk daftar elemen dari jenis yang sama - jangan lupa bahwa jumlah elemen dapat bervariasi.
4. Berhati-hatilah dalam menerapkan padding vertikal dan gunakan fitur ini di tempat yang berguna.

Tata letak CSS selalu berbentuk persegi panjang. Setiap garis halus adalah kompetensi pengembang. Aturan gaya memberikan opsi yang cukup untuk memberikan bentuk halaman yang mulus dalam resolusi layar. Tetapi setiap elemen tata letak selalu berbentuk persegi panjang di mana lokasi informasi diatur oleh aturan CSS.

Padding menyeluruh penting untuk setiap elemen pada halaman ketika benar-benar diposisikan, dan padding atas didefinisikan secara khusus dalam CSS karena penting untuk berbagai elemen, terutama elemen sebaris.

Aturan Pemosisian Dasar

Elemen blok memiliki aturan padding dari sisi elemen di dalamnya (margin), aturan padding untuk elemen di dalamnya (padding), dan lebar batas (border) yang juga dapat digunakan.

Yang paling penting adalah lekukan di bagian atas. CSS di dalam blok menghubungkan aturan padding dengan aturan untuk elemen yang diposisikan secara absolut dan relatif di dalam blok itu.

Praktik aturan CSS yang biasa: Anda dapat menentukan padding di semua sisi secara merata, berpasangan atas/bawah dan kanan/kiri, atau untuk setiap sisi secara terpisah. Sebagai contoh,

• margin: 10px
• bantalan: 10px20px
• bantalan: 10px20px30px40px.

Dalam kasus pertama, indentasi elemen dari sisi wadah luar di mana ia berada diatur. Dalam kasus kedua, indentasi atas dan bawah adalah 10px, kiri dan kanan - 20px. Dalam kasus ketiga, dimensi lekukan di semua sisi ditunjukkan: atas, kanan, bawah dan kiri.

Dalam semua kasus ini, indentasi CSS teratas adalah 10 px.

Aturan yang mengubah posisi elemen

Jika elemen tata letak tidak diposisikan secara mutlak, itu terletak di urutan umum halaman.

Jika kita mendefinisikan indentasi dari bagian atas CSS di elemen scCurrInfo, tujuannya akan tercapai, dan jika pada level li, itu tidak akan tercapai.

Dalam contoh ini, menggunakan padding: 40px; membutuhkan pengurangan aturan lebar dan tinggi yang memadai sebesar 80 piksel. Jika tidak, ukuran blok scCurrInfo akan melampaui batas blok luar.

Jika kami menghapus aturan padding dari deskripsi scCurrInfo, tetapi menambahkannya dengan nilai 20px ke deskripsi gaya elemen daftar, kami hanya mendapatkan indentasi atas. CSS tidak akan menerapkan nilai ini ke sisi lain.

Secara alami, penggunaan aturan indentasi ini berlaku untuk setiap elemen li.

Praktik Umum untuk Pemformatan Konten

Beberapa pengembang mencapai kesempurnaan dengan meletakkan halaman dengan elemen blok. Rupanya, ini adalah praktik klasik - untuk memulai dengan tabel dan menyelesaikan proses pendidikan Anda sendiri di balok.

Kebebasan yang melekat dalam tata letak blok sangat menarik, dan imajinasi pengembang mungkin tidak dibatasi oleh aturan tabel yang ketat: hanya baris, hanya sel, penggabungan hanya secara horizontal dan vertikal. Tidak ada yang aneh dengan ide-ide relasional.

Sementara itu, tabel, selain kekurangan yang jelas, memiliki banyak keunggulan kualitatif. Saat membuat indentasi dari atas, CSS memperhitungkan indentasi di kiri, di kanan (bawah adalah momen spesial). Aturan sel tabel memungkinkan Anda mengontrol perataan baik secara vertikal maupun horizontal. Menggunakan gaya baris, dikombinasikan dengan gaya sel, Anda dapat membuat tampilan konten yang kompleks.

Representasi halaman yang biasa dalam bentuk persegi panjang sama sekali tidak menghalanginya untuk disajikan dalam bentuk tabel. Ini juga persegi panjang, tetapi mereka juga sel tabel, yaitu, mereka memiliki aturan sendiri yang melengkapi aturan blok.

Pemosisian mutlak

Blokir dengan aturan POSISI: absolute ; akan ditempatkan di tempat yang ditentukan oleh koordinatnya relatif terhadap blok di mana ia berada.

Fitur karakteristik aturan CSS adalah "praktik adalah kriteria kebenaran terbaik" dalam banyak kasus, terutama ketika kompatibilitas lintas-browser diperlukan dan tata letak dilakukan secara manual, lebih baik mempelajari manual lengkap pada lembar gaya berjenjang.

Penggunaan tabel sering menyebabkan masalah pergeseran sel. Sebuah offset serupa dalam sebuah blok tidak selalu mempengaruhi semua elemen. Dengan bereksperimen, Anda dapat mencapai hasil yang diinginkan. Tugas sepele: bagaimana hapus padding atas, CSS tidak selalu menyelesaikannya dengan cara yang sepele.

Dalam beberapa kasus, ketika Anda harus mengeset elemen halaman di kedalaman beberapa sistem manajemen konten situs populer, Anda masih perlu memperhatikan tidak hanya praktik eksperimental, tetapi juga untuk melihat pengalaman rekan kerja.