BLOG
CSS İle Boyutlandırma ve Yerleşim İşlemleri -..
CSS İle Boyutlandırma ve Yerleşim İşlemleri - (Padding, Margin, Float, Clear)

Height: Nesnelerin yüksekliğini belirlemek için kullanılır.

Width: Nesnelerin genişliğini belirlemek için kullanılır.

Margin: Divlerin dışından boşluk bırakarak onları hareket ettirmeye yarar. Örneğin bir div'e "Margin-top:20px"; özelliği verilirse, bu divin üst kısmından 20 px boşluk bırakılacak.  Böylece div nesnesi yukarıdan aşağıya 20 px kaymış olacak.

Padding: Divlerin iç kısmından boşluk bırakarak, divin içine yazılanların o noktadan itibaren başlamasını sağlar. Burada dikkat etmemiz gereken kısım, örneğin 100 px genişliğinde bir divimiz olsun. Bu dive "padding-left: 20px" değerini verdiğimizde, içindeki yazı soldan 20 px boşluk bırakarak başlayacaktır. Ancak artık divin boyutu 20 px boşluk + 100 px genişlik = toplam 120 px olacaktır. Bunu önlemek için, padding-left'e verdiğimiz değeri genişlikten çıkarırız. Yani bu örnekte genişliği 80px olarak değiştirmek zorundayız. Aynı şey yükseklik için de geçerlidir.

Float: Divleri sola ya da sağa yaslamaya yarar. Böylece divleri yan yana sıralayabiliriz. Float:left şeklinde kullandığımızda divi sola yaslarken, Float: right şeklinde kullandığımızda ise divleri sağa doğru yaslayacaktır.

Clear: float özelliklerini kaldırmak için kullanılır. Örneğin 2 tane divi float:left ile sola yasladıktan sonra, yeni bir divi alttan başlatmak istiyorsak, clear kullanarak float özelliklerini kaldırmamız gerekir. Eğer yeni oluşturduğumuz divin içinde clear tanımladıktan sonra, alt satırda bu divi tekrar sola yaslamak istersek karışıklık oluşur. Bunun önüne geçmek için, ".temizle" gibi bir isim kullanarak sadece "clear:both" özelliği olan bir div oluştururuz. Floatları temizlemek istediğimizde "temizle" divini kullanarak karışıklığı engellemiş oluruz.

18.11.2015
Yücel Solak
YORUMLAR