Go Dilinde Concurrency

968 More

Projedeki Git Dosyaları Nasıl Silinir?

1 5,737 More

yTheme

4 2,278 More

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

2 1,519 More

Truemag

  • PHP
  • Golang
  • Laravel
  • Linux
  • SQL
  • SEO
  • WordPress
  • Diğer
    • Yazılım
    • Javascript
    • Css/XHtml/W3C
    • Genel
    • Tanıtım
    • Ajax
  • 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).

    Haz 19, 2006Erhan Yakut
    Cloud Sunucu
    Css'in Temeli "Kutu Modeli"Programcılar Sorunlu mu?
    You Might Also Like
     
    Myriad Bir Tutkudur
     
    ytelefon | Yakuter Telefon Defteri Betiği
    Erhan Yakut
    13 years ago Css/XHtml/W3CBox Model3,770
    Sponsorlar

    sponsor

    sponsor

    sponsor

    sponsor
    Bağlantılar
    • Beyazıt Kölemen
    • Domatessuyu
    • Lezzetli Robot Tarifleri
    • Ofizzo
    • PHP Dersleri
    Random Posts
    Android İçin Dosya Yöneticisi
    Sitelerin Kapanmasına Neden Olan Kanun (5651)
    Atatürk’ten Duymadıklarınız
    Günlük Dediğin…
    5 Kullanışlı Go Fonksiyonu
    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ği

    Bulut Sunucu

    2006-2019 © Yakuter