Scribd Logo
Hochladen

Willkommen bei Scribd!

  • CSS Box Model

    Hochgeladen von

    Ankit Saha
    27 Ansichten2 Seiten
    h

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    h

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    27 Ansichten2 Seiten

    CSS Box Model

    Hochgeladen von

    Ankit Saha
    h

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 2

    8/4/13

    CSS Box Model


    Search w3schools.com: Select Language

    HOME

    HTML

    C SS

    JAVASC RIPT

    JQUERY

    XML

    ASP.NET

    PHP

    SQL

    MORE...

    R EFER ENC ES

    EXAMPLES

    FO R UM

    ABO UT

    Get Certified
    Study Web Technologies and get a diploma at w3schools.com

    SHARE THIS PAGE

    Like

    76k

    CSS Basic
    CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To

    CSS Box Model


    Previous Next Chapter

    WEB HOSTING
    Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email

    The CSS Box Model


    All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:

    CSS Styling
    Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables

    WEB BUILDING
    Download XML Editor FREE Website BUILDER FREE Website C reator Best Website Templates

    CSS Box Model


    CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

    STATISTICS
    Browser Statistics OS Statistics Display Statistics

    CSS Advanced
    CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors CSS Summary Explanation of the different parts: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

    CSS Examples
    CSS Examples CSS Quiz CSS Certificate

    Width and Height of an Element


    Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins. The total width of the element in the example below is 300px:

    CSS References
    CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX

    w i d t h : 2 5 0 p x ; p a d d i n g : 1 0 p x ; b o r d e r : 5 p xs o l i dg r a y ; m a r g i n : 1 0 p x ;
    Let's do the math: 250px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) = 300px Assume that you had only 250px of space. Let's make an element with a total width of 250px:

    Example
    w i d t h : 2 2 0 p x ; p a d d i n g : 1 0 p x ; b o r d e r : 5 p xs o l i dg r a y ; m a r g i n : 0 p x ;
    Try it yourself The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin

    w3schools.com/css/css_boxmodel.asp

    1/2

    8/4/13

    CSS Box Model


    The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

    Browsers Compatibility Issue


    IE8 and earlier versions of IE, included padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.

    Previous

    Next Chapter

    W3Schools' Online Certification


    The perfect solution for professionals who need to balance work, family, and career building. More than 10 000 certificates already issued!

    Get Your Certificate


    The HTML Certificate documents your knowledge of HTML. The HTML5 Certificate documents your knowledge of advanced HTML5. The CSS Certificate documents your knowledge of advanced CSS. The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM. The jQuery Certificate documents your knowledge of jQuery. The XML Certificate documents your knowledge of XML, XML DOM and XSLT. The ASP Certificate documents your knowledge of ASP, SQL, and ADO. The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

    Top 10 Tutorials
    HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

    Top 10 References
    HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

    Examples
    HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

    Quizzes
    HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

    Color Picker

    Statistics
    Browser Statistics Browser OS Browser Display

    RE P O RT E RRO R

    HO ME

    TO P

    P RI N T

    FO RU M

    A BO U T

    A D V E RT I SE WI T H U S

    W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

    w3schools.com/css/css_boxmodel.asp

    2/2

    Das könnte Ihnen auch gefallen