Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • CSS Box Model

    Enviado por

    Rajesh Gupta
    75 visualizações2 páginas
    cdb

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    cdb

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    75 visualizações2 páginas

    CSS Box Model

    Enviado por

    Rajesh Gupta
    cdb

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 2

    2/14/14

    HOME

    CSS Box Model

    HTML

    CSS

    JAVASCRIPT

    JQUERY

    XML

    ASP.NET

    PHP

    SQL

    MORE...

    REFERENCES

    EXAMPLES

    FORUM

    Search w3schools.com

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

    WEB HOSTING

    CSS Box Model

    Best Web Hostin

    UK Reseller Host

    CSS Text
    CSS Fonts
    CSS Links
    CSS Lists
    CSS Tables

    CSS Box Model


    CSS Box Model
    CSS Border
    CSS Outline
    CSS Margin

    Developers Love

    Previous

    Next Chapter

    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.

    WEB BUILDING

    XML Editor - Free T

    FREE Website BUIL

    FREE Website C re

    SHARE THIS PA

    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 Padding

    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 Attr Selectors

    CSS3 Tutorial
    CSS3 Introduction
    CSS3 Borders
    CSS3 Backgrounds
    CSS3 Gradients
    CSS3 Text Effects
    CSS3 Fonts
    CSS3 2D Transforms
    CSS3 3D Transforms
    CSS3 Transitions
    CSS3 Animations
    CSS3 Multiple Columns

    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 inherited from the color property 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.

    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.

    CSS3 User Interface


    CSS Summary

    CSS Examples
    CSS Examples
    CSS Quiz
    CSS Certificate

    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

    The total width of the element in the example below is 300px:

    width:250px;
    padding:10px;
    border:5px solid gray;
    margin:10px;

    WEB RESOURC

    Web Statistics

    Web Validation

    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
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;

    file:///E:/Document/w3schools-2014/css/css_boxmodel.html

    1/2

    2/14/14

    CSS Box Model


    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
    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

    Top 10 Tutorials

    Top 10 References

    Top 10 Examples

    Web Certificates

    Color Picker

    colorpicker

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

    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

    HTML Examples
    C SS Examples
    XML Examples
    JavaScript Examples
    HTML DOM Examples
    jQuery Examples
    XML DOM Examples
    AJAX Examples
    ASP Examples
    SVG Examples

    R EPO R T ER R O R

    HO ME |

    TO P

    HTML C ertificate
    HTML5 C ertificate
    C SS C ertificate
    JavaScript C ertificate
    jQuery C ertificate
    XML C ertificate
    ASP C ertificate
    PHP C ertificate

    PR INT

    FO R UM

    ABO UT

    ADVER TISE W ITH US

    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,
    cookie and privacy policy. C opyright 1999-2014 by Refsnes Data. All Rights Reserved.

    file:///E:/Document/w3schools-2014/css/css_boxmodel.html

    2/2

    Você também pode gostar