Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
33 views

CSS Box Model

The CSS box model describes the rectangular boxes that are generated for elements in HTML documents. These boxes have four areas: content, padding, border, and margin. The content area contains an element's content such as text or images. The padding area surrounds the content and separates it from the border. The border area is where the border is located and different styles can be applied. Surrounding the border is the margin area, which separates elements from each other.

Uploaded by

Frank Malai
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

CSS Box Model

The CSS box model describes the rectangular boxes that are generated for elements in HTML documents. These boxes have four areas: content, padding, border, and margin. The content area contains an element's content such as text or images. The padding area surrounds the content and separates it from the border. The border area is where the border is located and different styles can be applied. Surrounding the border is the margin area, which separates elements from each other.

Uploaded by

Frank Malai
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Box Model

http://www.littlewebhut.com/css/info_box_model/

Custom Search

Home
Your Guide To Web Design

HTML

CSS

Inkscape

GIMP

Articles

iPhone App

Contact

(Cascading Style Sheets) CSS 2.1 Reference


CSS Video Tutorials CSS Syntax How to apply styles Selectors Box Model What is the CSS Box Model? The rectangular boxes, which are generated for elements, are described by the CSS Box Model. Boxes are comprised of four areas. The inner most area is called the "content" area. Surrounding the "content" area is the "padding" area. Surrounding the "padding" area is the "border" area. Surrounding the "border" area is the "margin" area. See the box background -attachment -color -image -position -repeat border -width -style -color border-bottom -width -style -color border-left -width -style -color border-right -width -style -color border-top -width -style -color border-collapse border-spacing bottom caption-side clear clip color content counter-increment counter-reset cursor direction display empty-cells float font -style -variant -weight -size -family
Looking for Absolute Image? Find Absolute Image on Facebook. Sign Up Free Now! www.Facebook.com JavaScript Developer Tool Build business web applications with nothing but JS. Free Download. www.wakanda.org DrillingExchange.com Search thousands of oil and gas companies and list your biz free! www.drillingexchange.com

CSS Box Model

model diagram below. "content" area: This area is where the element's content is placed. Content is text, images, etc. "padding" area: This area separates the "content" from the "border." The size of this area can be set to zero. "border" area: This area is where a box border is located. Different border styles (e.g., solid, dashed, dotted, etc.) can be specified. The "border" is optional. "margin" area: This area separates the "border" from the outside of the box. The size of this area can be set to zero.

CSS Box Model Diagram

1 of 2

31/05/2012 11:46

CSS Box Model

http://www.littlewebhut.com/css/info_box_model/

height left letter-spacing line-height list-style -type -position -image margin -top -right -bottom -left max-height max-width min-height min-width orphans outline -color -style -width overflow padding -top -right -bottom -left page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-indent text-transform top unicode-bidi vertical-align visibility white-space widows width word-spacing z-index

The material on this site (LittleWebHut.com) is for educational purposes only. We make no warranty or guarantee of the accuracy or reliability of information contained herein or at other sites to which we link. The risk from using this site, the information contained herein, or the sites to which we link lies entirely with the user. By using this site, you agree to have read and accepted our Terms of Use and Privacy Policy.

2 of 2

31/05/2012 11:46

You might also like