Untuk tampilan elemen yang lebih indah pada halaman web, indentasi eksternal dan internal dalam css digunakan, dan sekarang kita akan menganalisisnya dengan contoh.
Setiap elemen, baik itu paragraf, div, gambar atau video, adalah blok di mana Anda dapat membuat indentasi baik di dalam dengan properti padding maupun di luar dengan margin.
Dalam css, properti ini ditulis untuk indentasi dengan cara ini (misalnya, paragraf diambil):
Alih-alih tag P, Anda tentu saja menulis elemen Anda, yang lekukannya akan diterapkan.
Sangat penting untuk memahami dan mengingat bahwa untuk parameter margin dan konstruksi padding indentasi untuk setiap sisi adalah sama.
Artinya, kami memiliki 4 nilai di setiap lekukan:
Nilai indentasi.
- Arti pertama: indentasi atas;
- Arti kedua: indentasi ke kanan;
- Arti ketiga: margin bawah;
- Arti keempat: indentasi kiri.
Dalam contoh ini, saya membuat margin padding luar di css dengan cara ini: Saya menulis 20px di atas, 10px di kiri dan kanan (sebagai aturan, mereka ditulis sama untuk simetri), dan di bawah saya ditunjukkan 30px.
Dan untuk padding padding bagian dalam, saya tentukan: 10px di bagian atas, kiri dan kanan, dan 14px di bagian bawah.
Nilai untuk padding dalam properti margin dan padding dapat dikurangi, asalkan ukurannya sama.
Dari contoh saya, notasi yang disingkat sudah akan terlihat seperti ini:
Artinya, ketika entri numerik terakhir hilang, dalam hal ini untuk indentasi kiri, browser secara otomatis mengganti indentasi kiri dengan nilai yang sama dengan nilai kanan.
Dan dalam kasus saya, indentasi di kanan dan kiri masing-masing 10px, yang ada di margin, yang ada di padding.
Dan jika Anda memiliki nilai yang sama untuk margin luar di bagian atas dan bawah (misalnya: 16px), dan nilai yang sama untuk margin luar di kiri dan kanan (misalnya: 20px), maka record akan memiliki bentuk yang lebih disingkat:
Dengan demikian, untuk lekukan css bagian dalam, entri identik dengan yang ini.
Menerapkan indentasi tunggal: untuk setiap sisi secara terpisah.
Properti bernilai tunggal berikut berlaku untuk menentukan indentasi terpisah:
Properti bantalan untuk setiap sisi.
- margin-atas: 3px; bantalan atas luar;
- margin-kiri: 4px; margin kiri luar;
- margin-kanan: 6px; margin kanan luar;
- margin-bawah: 10px; bantalan bawah luar.
Dengan cara yang sama, entri ditulis untuk indentasi internal, hanya Anda yang perlu mengganti margin dengan padding.
Misalnya, Anda sudah memiliki semua indentasi di css untuk semua gambar img.
Yaitu (untuk kejelasan) padding luar 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 luar di bagian atas, dan membiarkan sisanya apa adanya. Dan untuk menyelesaikan tugas ini, cukup menulis kelas untuk gambar ini, dan menambahkan entri tambahan ke css.
Akibatnya, gambar yang Anda tambahkan dengan kelas verx akan menerima semua lekukan yang ditentukan dalam css untuk tag img, dan hanya akan mengubah margin 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. Padding adalah jarak dari tepi luar batas kanan item 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 lain yang dapat diterima untuk CSS. Nilainya bisa positif atau negatif.
Auto Menunjukkan bahwa ukuran indentasi akan dihitung secara otomatis oleh browser. mewarisi Mewarisi nilai dari induknya.
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
Peramban Internet Explorer 6 menggandakan nilai padding kiri atau kanan untuk elemen melayang yang bersarang di dalam elemen induk. Padding yang berdekatan dengan sisi induk digandakan. Masalahnya biasanya diselesaikan dengan menambahkan display: inline ke elemen melayang.
Internet Explorer hingga dan termasuk versi 7.0 tidak mendukung nilai pewarisan.
Kebetulan saat membuat elemen atau tata letak, kita perlu membuat indentasi horizontal sehingga relatif satu sama lain. Itu bisa sebagai balok atau berbagai elemen, atau lebih tepatnya, itu adalah untuk membuat jarak sehingga awalnya diatur antara blok yang terletak di tampilan horizontal. Ada cara yang berbeda pada pembuatan indentasi pada elemen desain. Namun, untuk kompatibilitas dengan beberapa browser modern di sini kita akan menyentuh topik yang relevan dengan lekukan sebagai teks atau blok pada halaman.Properti menentukan berapa banyak ruang teks horizontal yang akan dibungkus sebelum awal baris pertama elemen teks. Jarak dihitung dari awal dari tepi elemen dan wadah untuk tingkat blok.
Karena sebagian besar konten halaman web disajikan dalam bentuk teks, kemampuan untuk menata teks tersebut secara menarik dan efektif merupakan keterampilan penting yang dapat menjadi seorang desainer web. Metode yang paling umum digunakan dan direkomendasikan untuk membuat indentasi deskripsi dan paragraf adalah dengan menggunakan CSS. Di sini Anda akan disediakan berbagai contoh tentang bagaimana CSS dapat digunakan untuk teks dan elemen indentasi.
Tetapkan margin atas di CSS
Untuk membuat margin atas tentu kita tidak bisa tanpa properti CSS, oleh karena itu kita membutuhkan margin-top, nilai ini dapat diatur dengan cara yang berbeda, baik dalam px maupun standar pada piksel, em,% dan seterusnya, itu semua terjadi dalam stilistika CSS dalam satuan pengukuran.
Contoh penggunaan:
Blok margin (
margin-atas: 50px;
}
Apa yang dapat Anda lihat pada gambar:
Anda juga dapat menggunakannya untuk menjatuhkan blok, lalu di sini Anda dapat menggunakan properti yang disebut margin-kiri juga margin-kanan dan margin-bawah... Di mana kami hanya menunjukkan properti margin, di mana pada awalnya dimungkinkan untuk menetapkan 4 parameter untuk itu, di sini kami akan mempertimbangkan searah jarum jam untuk konsep, di mana kami mulai dari sisi atas dan melanjutkan di bawah setiap sisi.
margin: 20px 50px 30px 50px;
Beginilah cara kerjanya batas: kanan atas kiri bawah:
Juga memiliki padding di atas dalam CSS
Kebetulan Anda perlu menyelaraskan elemen konten secara vertikal, ini relatif terhadap blok induk, di sini dimungkinkan untuk menggunakan properti lain, seperti padding-top, yang, atau lebih tepatnya, secara default, mengatur padding ke atas. Jika kita berbicara tentang properti serupa, yang juga dapat ditulis dan ditetapkan dengan analogi, maka inilah margin dalam px, em,% dan unit lainnya.
Contoh:
Padding-blok (
padding-top: 47px;
}
Mari kita lihat sebuah contoh:
Sekarang kita dapat mempertimbangkan analog dari properti batas dan lapisan, yang digunakan untuk mengatur indentasi di sisi lain elemen blok, tetapi sudah berjalan secara terpisah: padding-kiri, padding-kanan, padding-bottom... Di mana Anda dapat segera mengatur jarak yang Anda butuhkan, hanya untuk semua sisi, dan semuanya akan sekaligus.
bantalan: 10px 20px 40px 50px;
Di sini Anda awalnya dapat mengatur nilainya sebagai for batas dimulai seperti yang Anda pahami dari atas, tetapi kemudian semuanya berjalan searah jarum jam, ada di kanan, di bawah, di kiri, dan seterusnya.
Sekarang, tergantung pada situasi yang berbeda, Anda memiliki kesempatan untuk membuat indentasi di atas gaya CSS, tempat kami menggunakan properti batas dan lapisan bahwa adalah mungkin untuk menempatkan elemen-elemen yang diperlukan pada halaman sumber daya Internet Anda, seperti yang telah Anda bayangkan dan perlu Anda lakukan.
Halo! Awalnya, saya ingin membagi artikel ini menjadi 4 bagian kecil, tetapi kemudian saya memikirkannya. Untuk apa? Lagi pula, akan lebih mudah ketika informasi tersebut dikumpulkan dalam kerangka satu materi.
Oleh karena itu, hari ini kita akan belajar bagaimana melakukannya lekukan CSS kiri dan semua sisi lainnya - kanan, atas dan bawah. Mereka dapat dilakukan untuk gambar dan teks. Mereka terdiri dari dua jenis:
- Luar;
- Intern.
Untuk yang pertama, margin properti utama digunakan, untuk yang terakhir, padding. Untuk kejelasan, saya membuat contoh kecil untuk Anda. Untuk membuatnya nyaman secara visual untuk membedakan antara ruang internal dan eksternal, saya menambahkan tabel yang terlihat. Mari kita lihat apa yang terjadi?
Bantalan eksternal
Dengan mendaftarkannya dalam file gaya CSS, akan memungkinkan untuk mengatur orientasi blok informasi pada halaman. Misalnya, pindahkan ke kiri dan ke bawah. Mari kita segera mendemonstrasikan bagaimana tampilannya.
Secara umum, Anda dapat menggunakan opsi berikut untuk mengatur indentasi.
Kiri (margin-kiri).
Kanan (margin-kanan).
Atas (margin-atas).
Bawah (margin-bottom).
Sekarang saya akan menunjukkan nuansa keren lainnya.
Seperti yang Anda lihat, Anda dapat menggunakan salah satu opsi - efeknya sama. Hanya dalam kasus kedua kodenya lebih ringkas. Perhatikan juga bahwa padding searah jarum jam. Semuanya dimulai dari atas dan berakhir di kiri.
Bantalan internal
Prosedurnya serupa di sini. Hanya sekarang saya akan menambahkan properti baru bukan untuk seluruh tabel, tetapi untuk isi kolom.
Mari kita lihat apa yang terjadi.
Mirip dengan padding in CSS eksternal dapat ditulis dalam kode pendek atau untuk para pihak secara terpisah.
Ini adalah yang menarik. Akhirnya, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat beberapa pekerjaan lebih mudah.
Lekukan pada level tag yang dipilih
Dalam kasus yang kita lihat di atas, mereka disetel untuk teks dan gambar secara bersamaan. Bahkan, Anda dapat mengatur jarak ke elemen pada level tag tertentu. Saya akan menunjukkan cara kerjanya. Membatalkan perubahan terakhir dan tunjukkan kode khusus dalam lembar gaya.
Mari kita lihat apa yang terjadi setelah menyimpan perubahan.
Gambar tetap di tempatnya, hanya teks yang terlampir di sebelah kiri yang dipindahkan. Manipulasi serupa dapat diterapkan ke blok lain, misalnya, tr, span.
Sebagai informasi tambahan Saya mengusulkan publikasi tentang tugas untuk ditinjau. Ada juga cukup dijelaskan cara yang menarik... Ini dapat berguna untuk membentuk garis merah dalam teks atau melakukan tindakan lain.
Selain itu, ada langganan distribusi informasi gratis di alamat email... Untuk berlangganan blog ada bentuk khusus... Sampai Lain waktu.
Sumber daya web dinilai oleh pengguna untuk daya tarik visualnya. Oleh karena itu, bahkan teks yang berguna secara informasi tidak dapat dibaca karena formatnya buruk. Kesimpulan - Anda perlu hati-hati dan hati-hati mendekati tidak hanya konten semantik halaman situs, tetapi juga presentasi visualnya. Munculnya teknologi CSS telah memperluas kemungkinan untuk membuat artikel yang menarik. Salah satu properti yang dirancang untuk memudahkan memahami apa yang ditulis 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, lekukan berada di antara batas blok yang berdekatan;
- margin dapat diperhitungkan dalam dimensi 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 dokumen yang mendefinisikan paragraf. Dalam kasus yang paling sederhana, ditulis sebagai:
margin: 12 piksel.
Garis seperti itu berarti bahwa di sekitar blok teks (atau blok lainnya), indentasi 12 piksel akan dibuat di semua sisi. Untuk menambah interval, misalnya, tiga kali, cukup menulis:
margin: 36 piksel.
Tetapi bagaimana jika jarak antar balok harus berbeda di setiap sisi? Pengembang web menggunakan beberapa bentuk penulisan:
- margin: 11px 22px.
- margin: 11px 22px 33px.
- margin: 11px 22px 33px 44px.
Pada contoh pertama, 11 piksel akan diberi jarak dari batas bawah dan atas blok, dan 22 piksel dari sisi blok. Menurut bentuk notasi kedua, akan ada 11 piksel antara tepi atas blok dan konten, 33 piksel antara tepi bawah, dan 22 piksel di sisi. 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 pada satu sisi: margin-atas, margin-bawah, margin-kiri, margin-kanan... Setelah menerjemahkan nama-nama properti ke dalam bahasa Rusia, mudah ditebak tentang tujuannya. Misalnya, entri berikut mengatakan bahwa indentasi di sebelah kanan akan menjadi 22 piksel:
margin-kanan: 22px.
Untuk sisa sisi, jarak di sekitar blok diambil sama dengan nilai elemen induk.
Properti batas memiliki kekhasan yang harus diingat pengembang saat menggunakan lekukan vertikal teks CSS. Interval elemen tetangga tidak diringkas, tetapi ditumpangkan satu sama lain. Misalnya, biarkan salah satu blok memiliki margin-bawah: 15px, dan blok yang berdekatan dengannya dari bawah margin-atas: 35px... Aritmatika sekolah dan akal sehat menentukan bahwa total ruang di antara mereka akan menjadi 50 piksel. Dalam praktiknya, ini tidak terjadi. Blokir dengan nilai bagus properti batas Akan "menelan" tetangganya. Hasilnya, jarak antar elemen akan menjadi 35 piksel.
"Garis merah
Membuat dokumen di editor teks, pengguna lebih suka menentukan setiap paragraf baru dengan garis "merah". DENGAN menggunakan CSS tidak sulit untuk membuat indentasi teks ke kiri - konstruksinya digunakan indentasi teks... Ini ditulis seperti ini:
indentasi teks: 11px.
Artinya, baris pertama paragraf akan digeser relatif ke tepi kiri sebesar 11 piksel. Untuk membuat teks di halaman web lebih seperti dokumen di editor, Anda juga harus menginstal, yaitu menulis:
indentasi teks: 11px;
text-align: membenarkan.
Selain piksel, saat menjelaskan markup, diperbolehkan menggunakan unit lain - inci, poin, persen. Biarkan blok memiliki padding teks CSS 10%. Dengan lebar blok 500 piksel, garis merah akan menjadi 50 piksel (10% dari 500).
Properti ini dapat diatur ke mewarisi... Entri semacam itu mengatakan bahwa blok menggunakan properti serupa dari blok induk.
indentasi teks: mewarisi.
Anehnya, itu juga bisa mengambil nilai negatif! Dalam hal ini, apa yang disebut tonjolan 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.
utama properti CSS untuk ditinjau. Latihan akan membantu mengkonsolidasikannya. Berikut adalah beberapa tip terakhir tentang cara menerapkan materi ini ke pengembangan situs web Anda:
- garis merah dan indentasi teks adalah konsep yang berbeda, dan properti yang berbeda digunakan untuk menunjukkannya;
- untuk lekukan vertikal, aturan matematika tidak berlaku - interval ditumpangkan, elemen dengan nilai besar "menang";
- Indentasi paragraf negatif digunakan untuk menunjukkan baris pertama paragraf menggunakan gambar.
