Hari ini kami akan berbicara sedikit dengan Anda tentang prinsip-prinsip tata letak, yaitu, cara mengatur indentasi elemen tertentu di situs Anda.

Elemen yang dipermasalahkan untuk diberi indentasi dapat berupa teks, gambar, tabel, atau elemen HTML lainnya. Hal utama adalah mengikuti beberapa aturan penting, yang akan saya ceritakan sekarang.

Jika Anda baru saja membuat situs, saya sarankan Anda memasukkan properti berikut di bagian atas file gaya utama Anda:

* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;) *: before, *: after (-webkit-box-sizing: border- box; -moz-box-sizing: border-box; box-sizing: border-box;)

Mengapa ini perlu, Anda bertanya? Saya menjawab pertanyaan Anda dengan contoh ilustrasi.

Katakanlah Anda memiliki elemen tata letak seperti ini:

Halo Dunia!

Beginilah tampilan opsi tanpa menggunakan properti yang dijelaskan di atas (elemen atas) dan menggunakannya (elemen bawah):

Apa yang bisa kamu lihat di sini? Bahwa lebar elemen pada versi pertama (tanpa menggunakan properti) menjadi lebih besar dari yang ditentukan karena bantalan yang ditambahkan, yang tidak sepenuhnya nyaman dan benar dalam hal tata letak.

Opsi dengan properti jauh lebih menyenangkan secara estetika, tetapi perlu digunakan secara sadar, karena saat Anda menambahkannya ke situs siap pakai, Anda berisiko mendapatkan desain yang buruk dan "sakit kepala" dalam bentuk membawa semua ini ke dalam bentuk yang benar. Semua proyek yang sempat saya pimpin dari awal bukannya tanpa properti ini.

Dan sekarang, sebenarnya, mari kita bicara tentang opsi untuk mengatur indentasi elemen di situs Anda dengan contoh ilustratif.

Padding dengan properti CSS "padding"

Agar Anda memahami keseluruhan logika, mari ambil cuplikan tata letak berikut sebagai contoh:

Halo Dunia!

dengan gaya mereka:

Test_div (lebar: 250px; batas: 1px solid;)

Versi visualnya adalah sebagai berikut:

Apa properti itu " lapisan"? Ini membantu untuk mengatur padding pada elemen yang ditentukan. Mari tambahkan padding 10px ke layout kita:

Test_div (lebar: 250px; perbatasan: 1px solid; padding: 10px; // Padding 10px)

Secara visual ternyata seperti ini:

Angka 10 di properti berarti bahwa di dalam elemen yang ditentukan, pada masing-masing dari empat sisinya, indentasi 10px harus ditambahkan. Piksel (px) dapat diganti dengan persentase atau nilai CSS lain yang didukung.

Ada dua opsi secara total indikasi sisi yang akan dilekukkan.

Pertama - ini dengan indikasi eksplisit dari para pihak:

Padding-top: 10px; // 10px padding di atas padding-right: 10px; // 10px padding ke kanan padding-bottom: 10px; // Padding bawah 10px padding-left: 10px; // 10px padding ke kiri

Dalam hal ini, setiap sisi menggunakan propertinya sendiri. DAN kedua:

Padding: 10px 0 0 0; // 10px padding di atas, yang lainnya adalah 0px padding: 10px 0; // 10px padding atas dan bawah dan 0px padding pada sisi padding: 0 10px; // padding 0px di atas dan bawah, dan 10px di samping

Di sinilah penghitungan nilai sederhana, yang masing-masing sesuai dengan sisi yang berbeda. Sisi diatur seperti ini: nilai pertama di atas, yang kedua di kanan, yang ketiga di bawah dan yang keempat di kiri, yaitu, semuanya searah jarum jam.

Jika ada dua nilai (atas dan kanan), maka ini berarti nilai cermin dari nilai yang sama turun dan ke kiri dan begitu saja. Segalanya tampak jelas. Jika Anda tidak perlu menyetel indentasi untuk beberapa sisi, tetapkan nilai untuk sisi ini ke "0". Saya lebih suka opsi ini, karena lebih kompak, tetapi dalam upaya saya, saya menggunakan opsi pertama.

Jenis indentasi ini bagus untuk memisahkan teks, konten sel tabel, dan informasi teks lainnya. Untuk memisahkan elemen itu sendiri, mirip dengan contoh di atas, ada properti lain.

Padding dengan properti CSS "margin"

Ciri khas properti " batas"Apakah padding ditambahkan di luar elemen, yaitu di luar.

Ada juga dua opsi untuk ditambahkan di sini.

Pertama - dengan indikasi eksplisit dari pihak tersebut:

Margin-top: 10px; // Padding 10px di margin kanan atas: 10px; // 10px margin di kanan bawah margin: 10px; // Padding bawah 10px margin-left: 10px; // 10px padding ke kiri

Kedua - dengan pencacahan nilai, yang masing-masing sesuai dengan sisinya:

Margin: 10px 0 0 0; // 10px margin atas, yang lainnya adalah 0px margin: 10px 0; // 10px padding di atas dan bawah, dan 0px di sisi margin: 0 10px; // Padding luar adalah 0px atas dan bawah dan 10px di samping

Saya tidak akan menjelaskan semua nuansa bekerja dengan aturan di sini, semuanya sama seperti tentang properti " lapisan», Ada tertulis tentang itu di atas.

Kami menggunakan margin dengan nilai berikut:

Test_div (lebar: 250px; perbatasan: 1px solid; margin: 10px; // Padding 10px)

Secara visual akan terlihat seperti ini:

Seperti yang Anda lihat dari contoh, dalam hal ini, bantalan eksternal ditambahkan, memisahkan elemen yang ditunjukkan.

Fitur penting: jika Anda melihat hasilnya dengan cermat, Anda mungkin telah memperhatikan bahwa padding elemen yang berdekatan tidak diringkas. Artinya, jika elemen pertama memiliki bantalan bagian bawah luar 10px, dan elemen kedua memiliki bantalan bagian atas luar dengan nilai yang sama, maka total jarak di antara keduanya juga akan menjadi 10 piksel. Jika 10 dan 15, maka totalnya adalah 15, dan seterusnya.

Jenis indentasi ini sering digunakan pada teks, yaitu pada desain paragraf, maupun pada elemen yang memiliki batas terlihat.

Tetapi kedua properti tidak terbatas hanya pada elemen-elemen ini. Anda memilih opsi untuk menggunakannya sendiri, saya hanya mencoba memberi Anda latar belakang tentang mereka.

Anya menulis kode berikut (contoh 1) dan mendapatkan halaman yang ditunjukkan pada gambar. 1. Tapi Anya tidak membutuhkan jarak antar blok, begitu juga ke kanan dan kiri blok. Perubahan apa pada kode yang diperlukan untuk ini?

Ada terlalu banyak spasi antara heading dan teks utama, bagaimana cara menguranginya?

Ke paragraf (tag

) dan judul (tag

) secara otomatis menambahkan pengisi atas dan bawah, yang menambah jarak yang besar antara judul dan teks. Untuk mengurangi jumlah padding, Anda perlu secara eksplisit menambahkan properti margin-bottom ke pemilih H1. Selain itu, Anda dapat menetapkan nilai positif, nol, atau negatif. Dengan cara ini, mudah untuk mengatur nilai indentasi yang diinginkan.

Bagaimana cara saya membuat indentasi baris pertama untuk setiap paragraf?

Saat Anda perlu menyiapkan indentasi paragraf, yang terbaik adalah menggunakan properti gaya indentasi teks. Nilainya menentukan seberapa besar akan menggeser teks dari baris pertama ke kanan dari posisi aslinya. Dalam hal ini, lebar blok teks tidak berubah dan tetap disetel di awal. Jumlah indentasi dapat ditentukan dalam piksel, persen, atau unit lain yang tersedia (contoh 1).

Bagaimana cara menghapus lekukan atas dan bawah dari daftar?

Gunakan properti gaya margin-top dan margin-bottom untuk UL atau OL selector, bergantung pada jenis daftar. Anda juga dapat menggunakan properti margin generik.

Bagaimana cara mengubah indentasi di halaman web?

Padding pada halaman web, meskipun tidak terlihat, tidak memungkinkan konten pas dengan tepi jendela browser untuk kenyamanan membaca. Anda dapat mengatur margin Anda sendiri dengan mengubah properti margin pada body selector.

Bagaimana cara menghapus padding di sekitar formulir?

Saat menambahkan formulir melalui tag

padding secara otomatis ditambahkan di sekitarnya di bagian atas dan bawah. Untuk menghapusnya, gunakan properti gaya margin nullable dengan menambahkannya ke pemilih FORMULIR.

Bagaimana cara mengubah spasi antar paragraf teks?

Saat menggunakan tag

Indentasi secara otomatis ditambahkan ke bagian atas dan bawah paragraf teks. Ini dilakukan untuk memisahkan satu blok teks dari yang berikutnya secara visual. Jelas bahwa nilai indentasi default tidak selalu memuaskan, sehingga terkadang harus dikurangi atau ditingkatkan. Untuk melakukan ini, Anda dapat menggunakan margin properti universal, ini mendefinisikan indentasi di semua sisi paragraf atau margin-top untuk indentasi atas dan margin-bottom untuk indentasi bawah.

Halo, para pembaca situs blog yang budiman! Hari ini kita akan melanjutkan eksplorasi Cascading Style Sheets atau CSS. Dalam artikel sebelumnya, kami telah memeriksa secara umum tata letak blok situs. Hasilnya, kami mulai mendapatkan halaman web yang cukup profesional, tetapi ada sesuatu yang hilang. Dan kemungkinan besar mereka tidak memiliki indentasi dan bingkai. Hari ini kita akan melihat pada style rules margin, padding dan border, yang memungkinkan Anda mengatur padding dan border untuk elemen html.

Opsi indentasi CSS

Dengan lembar gaya bertingkat, ada dua jenis lekukan.

1. Bantalan bagian dalam Adalah jarak dari batas imajiner suatu elemen ke isinya. Jarak diatur menggunakan parameter lapisan... Lekukan ini milik elemen itu sendiri dan terletak di dalamnya.

2. Indentasi eksternal - jarak antara batas elemen halaman web saat ini dan batas elemen tetangga, atau elemen induk. Besar kecilnya jarak dikontrol oleh properti batas... Indentasi ini berada di luar elemen.

Untuk kejelasan, gambarnya:

Misalnya, pertimbangkan sel yang berisi teks. Kemudian padding adalah jarak antara batas imajiner sel dan teks yang dikandungnya. Dan margin luar adalah jarak antara batas sel yang berdekatan. Mari kita mulai dengan bantalan.

Padding di CSS dengan padding (atas, bawah, kiri, kanan)

Properti gaya padding-left, padding-top, padding-right dan padding-bottom memungkinkan Anda untuk mengatur jumlah padding, masing-masing, ke kiri, atas, kanan, dan bawah elemen halaman web:

Jumlah indentasi dapat ditentukan dalam piksel (px), persen (%), atau unit lain yang dapat diterima untuk CSS. Saat menentukan persentase, nilainya dihitung dari lebar elemen. Nilai warisan menunjukkan bahwa itu diwarisi dari orang tua.

Misalnya, untuk paragraf saat ini, saya telah menerapkan aturan gaya yang mengatur padding kiri menjadi 20 piksel, padding atas menjadi 5 piksel, padding kanan menjadi 35 piksel, dan 10 piksel bawah. Entri aturan akan terlihat seperti ini:

p.test (
padding-left: 20px;
padding-top: 5px;
padding-right: 35px;
padding-bottom: 10px
}

Aturan gabungan dari padding memungkinkan Anda menentukan indentasi di semua sisi elemen halaman web sekaligus:

lapisan:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Dalam aturan kolektif, diperbolehkan menggunakan satu, dua, tiga atau empat nilai, memisahkannya dengan spasi. Dalam hal ini, efeknya bergantung pada jumlah nilai:

jika Anda menentukan satu nilai, maka jumlah indentasi akan ditetapkan di semua sisi elemen halaman;
jika Anda menentukan dua nilai, maka yang pertama akan mengatur jumlah indentasi di bagian atas dan bawah, dan yang kedua - di kiri dan kanan;
jika Anda menentukan tiga nilai, yang pertama akan menentukan jumlah lekukan di atas, yang kedua - ke kiri dan kanan, dan yang ketiga - dari bawah;
jika empat nilai ditentukan, yang pertama akan mengatur bantalan ke atas, yang kedua ke kanan, yang ketiga ke bawah, dan yang keempat ke kiri.

Dengan demikian, aturan CSS di atas dapat dipersingkat sebanyak mungkin dan ditulis sebagai berikut:

p.test (padding: 5px 35px 10px 20px)

Properti margin atau margin di CSS

Atribut gaya margin-left, margin-top, margin-right dan margin-bottom memungkinkan Anda untuk mengatur jumlah margin masing-masing untuk kiri, atas, kanan dan bawah:

Seperti disebutkan di atas, bantalan luar adalah jarak dari batas elemen saat ini ke batas elemen yang berdekatan, atau, jika tidak ada elemen yang berdekatan, ke batas dalam wadah induk.

Jumlah indentasi dapat ditentukan dalam piksel (px), persentase (%) atau unit lain yang dapat diterima untuk CSS:

p (
margin kiri: 20px;
}
h1 (
margin kanan: 15%;
}

Nilai otomatis berarti ukuran indentasi akan dihitung secara otomatis oleh browser. Dalam kasus penggunaan notasi persentase, indentasi dihitung bergantung pada lebar wadah induk... Selain itu, ini berlaku tidak hanya untuk margin-left dan margin-right, tetapi juga untuk margin-top dan margin-bottom, indentasi dalam persen akan dihitung bergantung pada lebar, bukan tinggi container.

Diijinkan untuk digunakan sebagai nilai margin nilai negatif:

p (
margin-left: -20px;
}

Jika, dengan nilai positif dari margin, elemen yang berdekatan menjauh, maka dengan nilai negatif, blok yang berdekatan akan melewati elemen yang kita atur margin negatifnya.

Kami juga dapat menentukan margin menggunakan atribut gaya batas... Ini mengatur jumlah indentasi dari semua sisi elemen halaman web secara bersamaan:

batas:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Jika satu, dua, tiga, atau empat nilai padding ditetapkan, properti ini mematuhi hukum yang sama seperti aturan padding.

Opsi perbatasan menggunakan properti perbatasan

Saat menyesuaikan bingkai, ada tiga jenis parameter:

lebar-batas - ketebalan batas;
warna batas - warna batas;
border-style - jenis garis yang akan digunakan untuk menggambar batas.

Mari kita mulai dengan parameter ketebalan perbatasan:

lebar batas: [nilai | tipis | media | tebal] (1,4) | mewarisi

Ketebalan bingkai dapat diatur dalam piksel, atau dalam unit lain yang tersedia dalam css. Variabel tipis, sedang dan tebal mengatur ketebalan perbatasan menjadi 2, 4 dan 6 piksel, masing-masing:

lebar batas: sedang;

Seperti pada properti padding dan margin, Anda dapat menggunakan satu, dua, tiga, atau empat nilai untuk parameter lebar-batas, sehingga mengatur lebar tepi untuk semua sisi sekaligus atau untuk masing-masing secara terpisah:

lebar-batas: 5px 3px 5px 3px

Untuk paragraf saat ini, mari buat batas atas 1px, kanan 2px, 3px bawah, dan kiri 4px menggunakan aturan (border-width: 1px 2px 3px 4px;)

Atribut gaya border-left-width, border-top-width, border-right-width, dan border-bottom-width dapat digunakan untuk mengatur ketebalan sisi kiri, atas, kanan, dan bawah tepi, masing-masing:

Parameter berikutnya adalah warna batas yang dapat Anda kontrol warna bingkai:

warna batas: [color | transparan] (1,4) | mewarisi

Properti memungkinkan Anda untuk mengatur warna perbatasan untuk semua sisi elemen sekaligus atau hanya untuk yang ditentukan. Sebagai nilai, Anda dapat menggunakan metode untuk menentukan warna yang diterima dalam html untuk warna: kode heksadesimal, kata kunci, dll.:

p (border-width: 2px; border-color: red)

Nilai transparan menyetel warna bingkai menjadi transparan, dan mewarisi dari induknya. Secara default, jika tidak ada warna batas yang ditentukan, maka yang digunakan untuk font di dalam elemen ini akan digunakan.

Atribut gaya border-left-color, border-top-color, border-right-color, dan border-bottom-color dapat digunakan untuk mengatur warna sisi kiri, atas, kanan, dan bawah tepi, masing-masing:

Dan set parameter gaya batas terakhir jenis bingkai:

gaya pembatas: (1,4) | mewarisi

Jenis bingkai dapat ditentukan untuk semua sisi elemen sekaligus atau hanya untuk yang ditentukan. Beberapa kata kunci dapat digunakan sebagai nilai. Tampilannya akan tergantung pada browser yang digunakan dan ketebalan border. Nilai tidak ada digunakan secara default dan tidak menampilkan bingkai dan ketebalannya disetel ke nol. Nilai tersembunyi memiliki efek yang sama. Bingkai yang dihasilkan untuk nilai lainnya tergantung pada ketebalan ditunjukkan pada tabel di bawah ini:

Atribut gaya border-left-style, border-top-style, border-right-style, dan border-bottom-style menentukan gaya garis yang akan digunakan untuk menggambar sisi kiri, atas, kanan, dan bawah batas, masing-masing:

Seperti halnya opsi padding dan padding, ada properti perbatasan umum... Ini memungkinkan Anda untuk secara bersamaan mengatur ketebalan, gaya dan warna perbatasan di sekitar elemen:

perbatasan: | mewarisi

Nilai dapat dalam urutan apapun, dipisahkan oleh spasi:

td (batas: 1px kuning pekat)

Untuk mengatur batas hanya pada sisi tertentu dari sebuah elemen, terdapat properti border-top, border-bottom, border-left, border-right, yang memungkinkan Anda untuk mengatur parameter masing-masing untuk sisi atas, bawah, kiri, dan kanan.

Tetap hanya untuk meringkas:

untuk menetapkan lapisan kami menggunakan properti lapisan;
untuk pengaturan margin ada aturannya batas;
opsi bingkai diatur menggunakan atribut berbatasan.

Perhatikan bahwa semua properti css ini meningkatkan ukuran elemen halaman web. Oleh karena itu, jika kita mengubah lebar perbatasan atau ukuran indentasi wadah blok yang membentuk desain halaman web, kita harus mengubah ukuran wadah ini, jika tidak mereka dapat bergeser dan desain akan rusak.

Itu saja, sampai jumpa!

Halo! Awalnya saya ingin membagi artikel ini menjadi 4 artikel kecil, tapi kemudian saya memikirkannya. Untuk apa? Bagaimanapun, akan lebih mudah bila informasi semacam itu dikumpulkan dalam satu materi.

Oleh karena itu, hari ini kita akan belajar bagaimana membuat indentasi CSS di kiri dan di semua sisi - kanan, atas dan bawah. Mereka bisa dilakukan untuk gambar dan teks. Ada dua jenis:

Luar;
Intern.

Untuk yang pertama, margin properti kunci digunakan, untuk yang kedua, 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?

Padding eksternal

Dengan menuliskannya di lembar gaya CSS, Anda dapat mengatur orientasi blok informasi pada halaman. Misalnya, gerakkan ke kiri dan ke bawah. Mari kita segera tunjukkan bagaimana tampilannya.

Secara umum, Anda dapat menggunakan opsi di bawah ini untuk menyetel indentasi.

Kiri (margin kiri).

Kanan (margin-right).

Atas (margin-top).

Bawah (margin-bottom).

Sekarang saya akan tunjukkan nuansa keren lainnya.

Seperti yang Anda lihat, Anda dapat menggunakan salah satu opsi - efeknya sama. Hanya dalam kasus kedua, kodenya lebih kompak. Perhatikan juga bahwa bantalannya searah jarum jam. Semuanya dimulai dari atas dan berakhir di kiri.

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

Dengan analogi dengan margin internal dalam CSS, margin eksternal dapat ditulis dalam kode singkatan atau untuk sisi secara terpisah.

Inilah yang menarik. Terakhir, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat beberapa pekerjaan lebih mudah.

Indentasi di tingkat tag yang dipilih

Dalam kasus yang kita lihat di atas, mereka disetel untuk teks dan gambar pada saat yang bersamaan. Bahkan, Anda bisa menyetel jarak ke elemen di tingkat tag tertentu. Saya akan menunjukkan cara kerjanya. Urungkan perubahan terakhir dan masukkan kode kustom di stylesheet.

Mari kita lihat apa yang terjadi setelah menyimpan perubahan.

Gambar tetap di tempatnya, hanya teks yang diapit 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. Metode yang cukup menarik juga dijelaskan di sana. Ini dapat berguna untuk membentuk garis merah di teks atau melakukan tindakan lain.

Selain itu, ada langganan untuk distribusi informasi gratis melalui alamat email. Ada bentuk khusus untuk berlangganan blog. Sampai Lain waktu.

Indentasi dalam dokumen html

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercise ullamco laboris nisi aliquip ex ea commodo Consequat. Duis aute irureit dolor in repre. Semua orang tidak tahu apa-apa. Kecuali jika ada yang terjadi, tidak ada orang yang tidak bertanggung jawab, karena itu di kantor polisi akan meminta Anda untuk bekerja. " Paragraf 1.10.32 "de Finibus Bonorum et Malorum", ditulis oleh Cicero pada tahun 45 AD. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eak ipsa quae ab illo inventore veritatis et quasi architectureo beatae vitae dicta sunt explicabo. Nemo enim ipsam volatatem sitia quasi. Konsekuensi magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolim voltu minimu aliquamate , latihan intip ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi konsekuensi? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae konsekuensi , vel illum qui dolorem eum fugiat " Terjemahan bahasa Inggris 1914, H. Rackham "Tetapi saya harus menjelaskan kepada Anda bagaimana semua gagasan yang salah tentang mencela kesenangan dan memuji rasa sakit ini lahir dan saya akan memberi Anda penjelasan lengkap tentang sistem tersebut, dan menguraikan ajaran aktual dari penjelajah hebat kebenaran, pembangun utama kebahagiaan manusia Tidak ada yang menolak, tidak menyukai, atau menghindari kesenangan itu sendiri, karena itu adalah kesenangan, tetapi karena mereka yang tidak tahu bagaimana mengejar kesenangan secara rasional menghadapi konsekuensi yang sangat menyakitkan. siapa pun yang mencintai atau mengejar atau ingin mendapatkan rasa sakit itu sendiri, karena itu adalah rasa sakit, tetapi karena kadang-kadang terjadi keadaan di mana kerja keras dan rasa sakit dapat memberinya kesenangan yang besar. Untuk mengambil contoh yang sepele, siapa di antara kita yang pernah melakukan latihan fisik yang melelahkan, kecuali untuk mendapatkan keuntungan darinya? Tetapi siapa yang berhak mencari kesalahan dengan pria yang memilih untuk menikmati kesenangan yang tidak memiliki konsekuensi yang mengganggu, atau orang yang menghindari rasa sakit yang tidak membuahkan hasil. nt kesenangan? " Paragraf 1.10.33 "de Finibus Bonorum et Malorum", ditulis oleh Cicero pada tahun 45 M. "Di vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptionuri sint occaecati non provident, similique sunt in culpa qui officia deserunt mollitia animor. Dll. rerum facilis est et expedita specialtio.Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime place at facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.Tempor requireditibus autem quibusdam autati autobiis debusietbus Ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias konsekuensi aut perferendis doloribus asperiores repellat. " Terjemahan bahasa Inggris tahun 1914, H. Rackham "Di sisi lain, kami mencela dengan kemarahan yang benar dan tidak menyukai orang-orang yang begitu tertipu dan terdemoralisasi oleh pesona kesenangan saat itu, begitu dibutakan oleh keinginan, sehingga mereka tidak dapat meramalkan rasa sakit dan masalah yang pasti akan terjadi; dan kesalahan yang sama adalah milik mereka yang gagal dalam tugas mereka karena kelemahan kemauan, yang sama dengan mengatakan melalui usaha keras dan rasa sakit. Kasus-kasus ini sangat sederhana dan mudah dibedakan. Dalam waktu luang, ketika kekuatan pilihan kita tidak terhalang dan ketika tidak ada yang menghalangi kita untuk dapat melakukan apa yang paling kita sukai, setiap kesenangan harus disambut dan setiap rasa sakit dihindari.Tetapi dalam keadaan tertentu dan karena tuntutan tugas atau kewajiban bisnis itu akan terjadi. sering terjadi bahwa kesenangan harus ditolak dan gangguan diterima. Oleh karena itu, orang bijak selalu berpegang pada prinsip seleksi ini: dia menolak kesenangan untuk mendapatkan kesenangan lain yang lebih besar, atau dia menahan rasa sakit untuk menghindari rasa sakit yang lebih buruk. "