CSS Yükseklik ve Genişlik Özelliği Ayarlama

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
CSS ile bir HTML öğesinin genişliğini ayarlamak için width, yüksekliğini ayarlamak için heigth özellikleri kullanılır. Bu özelliğe bir değeri vermek istediğinizde bunu auto (otomatik) , piksel cinsinden (px), yüzdelik olarak (%) veya metrik (cm) olarak belirtebilirsiniz. width ve heigth özellikleri kenar çizgilerini (border) ve marjları (margin) içermez; dolgu (padding), içerik (content) boşluğunun içindeki alanın yüksekliğini / genişliğini ayarlarlar!


Örnek;

Aşağıda bir <div> öğesinin genişliği onu kapsayan üst öğe <body> gövdesinin genişliğinin %100’ü olarak gösterilmiştir.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
border: 1px solid green;
}
</style>
</head>
<body>

<div>Bu div öğesinin genişliği 100% değerindedir.</div>

</body>
</html>




Örnek;

Aşağıdaki örneğimizde ise bir <div> öğesinin yüksekliği 200 piksel, genişliği ise onu kapsayan üst öğenin (<body>) %50’si olarak gösterilmiştir.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: green;
}
</style>
</head>
<body>

<div>Bu div öğesinin yüksekliği 200px genişliği ise %50 'dir</div>

</body>
</html>





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
border: 1px solid green;
}
</style>
</head>
<body>

<div>Bu div öğesinin genişliği 100% değerindedir.</div>

</body>
</html>
 
Üst Alt