Setiap elemen HTML memiliki dimensi berupa tinggi (height) dan lebar (width). Konsep box model pada CSS menerapkan bahwa setiap elemen dalam bentuk kotak dengan komposisi konten di dalamnya, padding, border dan margin. Dimensi tinggi dan lebar suatu elemen dipengaruhi oleh konten yang ada di dalam elemen tersebut. Semakin banyak konten ditambahkan, semakin banyak pula pertambahan dimensi baik tinggi maupun lebarnya.
Namun begitu, konten pada elemen bukan satunya metode untuk memperbesar dimensi elemen. Elemen tanpa konten pun dapat dipaksa agar memiliki dimensi dan ukuran melebihi kontennya sesuai dengan yang ditetapkan. Caranya dengan mengatur property width dan height pada CSS. Konsep pemaksaan ini akan mempengaruhi dimensi dan ukuran elemen dan tentu saja akan mempengaruhi pada konsep box model dengan berubahnya ukuran border elemen tersebut.
Dimensi lebar (width) dan tinggi (height) suatu elemen diukur dari nilai lebar dan tinggi konten pada elemen tersebut. Menaikkan ataupun menurunkan nilai padding, ketebalan border ataupun nilai margin pada elemen tidak akan mempengaruhi dimensi elemen. Hal ini karena dimensinya diukur berpatokan pada nilai lebar dan tinggi konten.
Suatu elemen HTML jika diciptakan akan memiliki dimensinya sendiri sesuai dengan isi kontennya. Namun pada kebutuhan tertentu, elemen tersebut dapat diubah dengan ukuran yang baru. Untuk mengubah dimensinya dibutuhkan property width dan height dengan nilai tertentu sesuai dengan keperluan.
width: value;
height: value;
Nilai atau value merupakan nilai dalam bentuk ukuran standart. Nilainya bisa dalam bentuk px, pt, pc, mm, % ataupun lainnya.
Berikut ini contoh elemen <p> dalam beberapa kondisi. Elemen <p> pertama memiliki dimensi normal sesuai dengan konten yang dikandungnya. Sedangkan elemen <p> yang kedua memiliki dimensi yang ditentukan dengan nilai lebar (width) 200px, dan tinggi (height) 200px.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
p{
margin:10px;
padding:5px;
color:teal;
border:solid 3px red;
}
</style>
</head>
<body>
<h1>Mengatur tinggi dan lebar elemen HTML</h1>
<p>Paragraf ini adalah paragraf normal tanpa pengaturan tinggi dan lebar elemen.</p>
<p style="width:200px;height:200px;">Paragraf ini mempunyai lebar sebesar 200px dan tinggi 200px;.</p>
</body>
</html>
Line height pada elemen adalah ukuran tinggi suatu barisan tiap text yang ada pada suatu elemen. Line height hanya efektif berlaku pada konten yang memiliki kumpulan teks dengan huruf yang ada di dalamnya. Satuan line height dalam bentuk ukuran baku standart seperti px, pt, em, % dan lainnya.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
p{
margin:10px;
padding:5px;
color:teal;
border:solid 3px red;
}
</style>
</head>
<body>
<h1>Mengatur line height elemen HTML</h1>
<p style="width:220px;line-height:normal;">Paragraf ini mempunyai line height normal (default)</p>
<p style="width:220px;line-height:30px;">Paragraf ini mempunyai line height sebesar 30px.</p>
<p style="width:220px;line-height:60px;">Paragraf ini mempunyai line height sebesar 60px.</p>
<p style="width:220px;line-height:8;">Paragraf ini mempunyai line height sebesar 8 ( x line height normal).</p>
<p style="width:220px;line-height:150%;">Paragraf ini mempunyai line height sebesar 150% ( x line height normal).</p>
<p style="width:220px;line-height:200%;">Paragraf ini mempunyai lebar sebesar 200% ( x line height normal).</p>
</body>
</html>
Hasil Script :
Paragraf ini mempunyai line height normal (default)
Paragraf ini mempunyai line height sebesar 30px.
Paragraf ini mempunyai line height sebesar 60px.
Paragraf ini mempunyai line height sebesar 1.8 ( x line height normal).
Paragraf ini mempunyai line height sebesar 150% ( x line height normal).
Paragraf ini mempunyai lebar sebesar 200% ( x line height normal).
Property max-height merupakan property CSS yang digunakan untuk menetapkan tinggi maksimal suatu elemen. Jika tinggi konten belum mencapai nilai max-height, maka tinggi elemen ditetapkan berdasarkan tinggi konten secara real.
Perbedaan property height dengan max-height pada CSS adalah jika pada property height, tinggi elemen ditetapkan secara baku dan pasti tidak berdasarkan nilai konten. Sedangkan max-height jika diterapkan akan mengikuti suatu kondisi. Yaitu jika tinggi konten belum mencapai nilai max-height, maka tinggi real elemen adalah sesuai dengan tinggi konten. Dan saat nilai kontennya besarannya sama atau lebih besar dari nilai max-height, maka maka nilai height adalah sama dengan nilai max-height.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:10px;
}
p{
margin:10px;
padding:5px;
color:teal;
border:dotted 1px magenta;
}
</style>
</head>
<body>
<h1>Mengatur max-height Elemen HTML</h1>
<div style="max-height:88px; border:solid 3px navy;">
<p>Ini adalah konten paragraf di dalam suatu div.</p>
</div>
<div style="max-height:88px; border:solid 3px navy;">
<p>Ini adalah konten paragraf di dalam suatu div. Ini adalah konten paragraf di dalam suatu div. Ini adalah konten paragraf di dalam suatu div. Ini adalah konten paragraf di dalam suatu div. Ini adalah konten paragraf di dalam suatu div. Ini adalah konten paragraf di dalam suatu div. Ini adalah konten paragraf di dalam suatu div.</p>
</div>
</body>
</html>
Property max-width merupakan property CSS yang digunakan untuk menetapkan lebar maksimal suatu elemen. Jika lebar konten belum mencapai nilai max-width, maka lebar elemen ditetapkan berdasarkan lebar konten secara real. Namun implementasi realnya adalah max-width bernilai sama dengan width.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:10px;
}
p{
color:teal;
border:dotted 1px magenta;
}
</style>
</head>
<body>
<h1>Mengatur max-width Elemen HTML</h1>
<div style="max-width:220px; border:solid 2px navy;">
<p style="width:110px;">Contoh paragraf di dalam suatu div.</p>
</div>
<div style="max-width:220px; border:solid 2px navy;">
<p style="width:330px;">Contoh paragraf di dalam suatu div. Contoh paragraf di dalam suatu div. </p>
</div>
<div style="max-width:220px; border:solid 2px navy;">
<p style="width:440px;">Contoh paragraf di dalam suatu div. Contoh paragraf di dalam suatu div. Contoh paragraf di dalam suatu div. </p>
</div>
</body>
</html>
Elemen yang menerapkan nilai property width, height, max-width dan max-height lebih kecil dari nilai kontennya, menyebabkan konten ditampilkan secara overlap dan melebihi batas elemen yang sudah ditentukan. Untuk mengatasi hal ini dapat menggunakan metode penggulungan layar.
Caranya dengan mengatur nilai property overflow dalam kondisi auto. Konten yang melebihi batas border elemen akan diberikan scrollbar untuk menggulung layar ke atas maupun ke bawah (vertikal) serta ke kanan maupun ke kiri (horizontal).
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:10px;
}
p{
color:teal;
border:dotted 1px magenta;
}
</style>
</head>
<body>
<h2>Membuat Scrollbar vertikal Elemen HTML</h2>
<div style="height:110px; border:solid 2px navy; overflow:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor. Nunc eu lacinia ex. Nam molestie vehicula sapien, vitae condimentum turpis maximus nec. Fusce eu accumsan metus. Aliquam blandit varius interdum.</p>
</div>
<h2>Membuat Scrollbar horizontal Elemen HTML</h2>
<div style="width:330px; border:solid 2px navy; overflow:auto;">
<p style="width:440px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante at sem hendrerit consectetur. Nullam tempus orci sed est dictum semper. Praesent lacinia nec massa quis gravida. Aliquam ultrices neque non nunc auctor, et elementum libero porttitor.</p>
</div>
</body>
</html>
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
