Go Dilinde Concurrency

2,312 More

Projedeki Git Dosyaları Nasıl Silinir?

1 7,911 More

yTheme

4 2,691 More

Sunucu Güvenliği | SSH (Secure Shell) Kullanımı

2 2,167 More

Truemag

  • PHP
  • Golang
  • Laravel
  • Linux
  • SQL
  • SEO
  • WordPress
  • Diğer
    • Yazılım
    • Javascript
    • Css/XHtml/W3C
    • Genel
    • Tanıtım
    • Ajax
  • Home
  • ANASAYFA
  • HAKKIMDA
  • SPONSORLUK
  • ARŞİV
  • İLETİŞİM
  • BENİMLE ÇALIŞMAK İSTER MİSİNİZ?

The Basic Concept Of Css, “Box Model”

By this article I will tell you the basic concept of Css, “Box Model“. It is impossible to tell you all subjects about css here. Because of this if you do not know anything about css, please first have a look at the ccs tutorial at

  • W3schools

    Let’s talk about “Box Model”… Css accepts that all the objects (paragraph, images, link etc.) are some kind of boxes. Then you can replace your box where you want it to be. For a better explanation let me show you a picture.

    content : This can be any kind of image, paragraph or form element like input.
    margin: It is a transparent layer which is at the outside of the border. This helps you to align your object acccording to the other objects.
    border: When you want to create a frame at the outside of your box, you can use border. It is not transparent like margin and padding (if you do not choosed the style “none”). If you widen and choose a style like solid, dashed etc. for your border, you will see the frame.
    padding : It is just like margin. The difference is you use this to align your content according to the border, not to the other objects.
    Let’s give an example by using margin, border and padding.

    This paragraph is our content. It’s width is 300px. Margin-left is 25px. Border (frame) width is 3px and style is solid. Inside the frame there is a padding-left with 15px.

    The code of the example above is

    CSS
    1
    <div style="border: 4px solid ; width: 300px; margin-left: 25px; padding-left: 15px">This paragraph is our content. It's width is 300px. Margin-left is 25px. Border (frame) width is 3px and style is solid. Inside the frame there is a paddin-left with 15px</div>

    Another example is the general structure of a wordpress theme.

    Here you are a “Box Model”. We think all header footer, sidebar, content and container are boxes. Spaces between each other are created with margin. The content (yakuter.com) should be aligned by using padding. If you want you should make container’s border solid and 1px width. Then you will see that all your site is in a frame.

    Now try these things I told and see the results.
    In the following article about css, I will tell the difference between the internet explorer’s and firefox’s box model. And I will show how you can fix this problem(difference).

    Jun 19, 2006Erhan Yakut
    Cloud Sunucu


    hosting

    Css'in Temeli "Kutu Modeli"Programcılar Sorunlu mu?
    You Might Also Like
     
    CSS Dersi | Css İle Siteyi Ortalama
     
    IE ile W3C’nin CSS Kutu Modeli Farkı
    Erhan Yakut
    15 years ago Css/XHtml/W3CBox Model3,824
    Sponsorlar

    sponsor

    sponsor

    sponsor

    sponsor
    Bağlantılar
    • Beyazıt Kölemen
    • Domatessuyu
    • Lezzetli Robot Tarifleri
    • Ofizzo
    • PHP Dersleri
    • Wordpress Hosting
    Random Posts
    Sunucu Güvenliği | SSH (Secure Shell) Kullanımı
    14 Şubat 2008 – Sevgililere Özel
    WordPress Yazar Bilgileri
    iPhone 3.0 Güncelleme Sorunu
    Status Post Format
    sdafasdf
    Hakkımda

    Bilişim Teknolojileri alanında içerik üretmek üzere oluşturulmuş olan Yakuter.com 2006 yılında Erhan Yakut tarafından hayata geçirilmiştir. devamını okuyun…

    CLOUD SUNUCU DESTEĞİ
    2006-2020 © Yakuter