Bir arayüz tasarlarken birçok nesne kullanırız.Tasarım hakkında konuşurken aslında bu kutu modelini göz önünde bulundurmalıyız.Her kutu modeli 4 elementten oluşur.
En dıştan başlayarak sırasıyla her başlığa değinelim.
Margin:
Farklı nesneler arasındaki mesafemizi temsil eder.
Margin etiketinin 4 farklı özelliği var.
margin-top : Üst taraftan bıraktığımız mesafemargin-right : Sağ taraftan bıraktığımız mesafemargin-bottom : Alt taraftan bıraktığımız mesafemargin-left : Sol taraftan bıraktığımız mesafe
Bu etiketleri tek tekte kullanabiliriz.
Eğer tek satırda kullanmak istersek yukarıdaki sırayla değerler verebiliriz.
Örneğin :
Tek satırda 3 değer verirsek ;
Bu şekilde ise üstten 25px , sağdan ve soldan 50px ve alttan ise 75px mesafe bırakır.
Tek Satırda 2 değer verirsek ;
Üstten ve alttan 25px , sağdan ve soldan 50px mesafe bırakırız.
Tek satırda tek değer verirsek de;
4 taraftan da 25px mesafe vermiş oluruz.
Bir örnekle margin konusunu kapatalım.
Border:
Border nesnelerimize kenarlık ekler.
Bordere 3 değer verebiliriz ,border-style, border-width ve border-color.
1-) border-style : çizgimizin türünü belirler.
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: dotted dashed solid double;}Nasıl görünüyorlar ?
2-) border-width: çizgimizin kalınlığını temsil eder.
3-) border-color: çizgimizin rengini temsil eder.
Padding:
Css padding ile nesnelerin etrafında bulunan kenarlık ile arasındaki mesafeyi ayarlayabiliyoruz.
Padding özelliğinin margin özelliğimize çok benzer sıralamalarına kadar aynıdır.
Padding özelliğinin 4 etiketi vardır :
padding-toppadding-rightpadding-bottompadding-left
Bu etiketleri tek tekte kullanabiliriz.
Eğer tek satırda kullanmak istersek yukarıdaki sırayla değerler verebiliriz.
Tek satırda 3 değer verirsek ;
Bu şekilde ise üstten 25px , sağdan ve soldan 50px ve alttan ise 75px mesafe bırakır.
Tek Satırda 2 değer verirsek ;
Üstten ve alttan 25px , sağdan ve soldan 50px mesafe bırakırız.
Tek satırda tek değer verirsek de;
4 taraftan da 25px mesafe vermiş oluruz.
Bir örnekle padding konusunu kapatalım.
Kaynakça :
