Academic Tutorials



English | French | Portugese | German | Italian
Home Advertise Payments Recommended Websites Interview Questions FAQs
News Source Codes E-Books Downloads Jobs Web Hosting
Chats

CSS 2.0
CSS 2.0 Introduction
CSS 2.0 Attaching Style
CSS 2.0 Applying Style
CSS 2.0 Key Concepts
CSS 2.0 Color Contents
CSS 2.0 Fonts Contents
CSS 2.0 Text
CSS 2.0 Lists
CSS 2.0 the box model
CSS 2.0 Advanced concepts
CSS 2.0 Positioning
CSS 2.0 Boxes
CSS 2.0 Generated content
CSS 2.0 Dynamic effects
CSS 2.0 Tables
CSS 2.0 Paged media
CSS 2.0 Font Face
CSS 2.0 Aural Style Sheets
CSS 2.0 Language styles

HTML Tutorials
HTML Tutorial
XHTML Tutorial
CSS Tutorial
TCP/IP Tutorial
CSS 1.0
CSS 2.0
HLML
XML Tutorials
XML Tutorial
XSL Tutorial
XSLT Tutorial
DTD Tutorial
Schema Tutorial
XForms Tutorial
XSL-FO Tutorial
XML DOM Tutorial
XLink Tutorial
XQuery Tutorial
XPath Tutorial
XPointer Tutorial
RDF Tutorial
SOAP Tutorial
WSDL Tutorial
RSS Tutorial
WAP Tutorial
Web Services Tutorial
Browser Scripting
JavaScript Tutorial
VBScript Tutorial
DHTML Tutorial
HTML DOM Tutorial
WMLScript Tutorial
E4X Tutorial
Server Scripting
ASP Tutorial
PERL Tutorial
SQL Tutorial
ADO Tutorial
CVS
Python
Apple Script
PL/SQL Tutorial
SQL Server
PHP
.NET (dotnet)
Microsoft.Net
ASP.Net
.Net Mobile
C# : C Sharp
ADO.NET
VB.NET
VC++
Multimedia
SVG Tutorial
Flash Tutorial
Media Tutorial
SMIL Tutorial
Photoshop Tutorial
Gimp Tutorial
Matlab
Gnuplot Programming
GIF Animation Tutorial
Scientific Visualization Tutorial
Graphics
Web Building
Web Browsers
Web Hosting
W3C Tutorial
Web Building
Web Quality
Web Semantic
Web Careers
Weblogic Tutorial
SEO
Web Site Hosting
Domain Name
Java Tutorials
Java Tutorial
JSP Tutorial
Servlets Tutorial
Struts Tutorial
EJB Tutorial
JMS Tutorial
JMX Tutorial
Eclipse
J2ME
JBOSS
Programming Langauges
C Tutorial
C++ Tutorial
Visual Basic Tutorial
Data Structures Using C
Cobol
Assembly Language
Mainframe
Forth Programming
Lisp Programming
Pascal
Delphi
Fortran
OOPs
Data Warehousing
CGI Programming
Emacs Tutorial
Gnome
ILU
Soft Skills
Communication Skills
Time Management
Project Management
Team Work
Leadership Skills
Corporate Communication
Negotiation Skills
Database Tutorials
Oracle
MySQL
Operating System
BSD
Symbian
Unix
Internet
IP-Masquerading
IPC
MIDI
Software Testing
Testing
Firewalls
SAP Module
ERP
ABAP
Business Warehousing
SAP Basis
Material Management
Sales & Distribution
Human Resource
Netweaver
Customer Relationship Management
Production and Planning
Networking Programming
Corba Tutorial
Networking Tutorial
Microsoft Office
Microsoft Word
Microsoft Outlook
Microsoft PowerPoint
Microsoft Publisher
Microsoft Excel
Microsoft Front Page
Microsoft InfoPath
Microsoft Access
Accounting
Financial Accounting
Managerial Accounting
Network Sites


CSS 2.0 Properties - the box model


Previoushome Next






CSS2 Properties - the box model

A D V E R T I S E M E N T




The box model

Each HTML element is assumed to be in a box.

All HTML elements can have box model properties applied to them. Box model properties do not inherit.

There are three properties here: margin, border and padding; these apply to any element. In addition, the width and height of the element are also important.

As to the difference between margin and padding, margin is the space outside the element, and padding that inside it. Thus the padding color is the background-color of the element, whereas the margin color is the background-color of the parent element (except where the element doesn't have a parent, as with BODY or HTML).

Note that although box properties do not inherit, a margin applied to the BODY will affect all elements inside it, since they are all still inside BODY. If they inherited, then if the BODY had a 2-inch left margin, P would start four inches from the left of the page, etc.

The containing block

All element have a containing block. Elements are usually aligned with the edge of their containing block. In addition to providing a reference point for alignment, the width and height of the containing block is also used for interpreting the value of % on box model properties.

The containing block of normal static (static as opposed to positioned) elements is their nearest block-level ancestor. For example, in <BODY><P>, the containing block of the P element is BODY, and therefore margins, etc., on P will refer to the width of that.

An element that has display: block generates a block box. This defines the containing block for descendant elements. Note that content can go outside the principal block box; for example, when content overflows its block, or list item markers, which are placed in the margin of the box.

Bugs

All browsers have some problems with box properties. If all you want to do is give the BODY a left, right and bottom margin you will be OK. Beyond this, you may have problems, the most notable of which I detail below.

IE 3.00 interprets all margins as relative to the left of the page rather than the left of the element. This means negative horizontal margins will obscure content, and as a rule of thumb, left margins should only be set on BODY.

Netscape 4.* does not support border-top, border-left, etc., so use border-(top/left/right/bottom)-width, border-width or border, etc.

Box shorthands

The box shorthand property allow you to specify the box style for all four sides at once.

If one number is supplied in a shorthand, it is applied to all four sides; if two numbers, the first number to the top and bottom sides, and the second to the right and left; if three numbers, the first number to the top side, the second to the right and left sides, and the third to the bottom side; if four numbers, to the top, right, bottom, and left sides in that order.

Thus by these rules P {margin: 10px 5px} is applied as a 10 pixel vertical and 5 pixel horizontal margin.

Margin

Clearly each element can have four margins - left, right, bottom and top.

These are defined by the margin-left, margin-right, margin-top, margin-bottom properties.

The margin can be specified in any length, a percentage, or using the auto keyword. The percentage refers to the width of the containing block, regardless of whether it is applied to the left and right or top and bottom margins.

In addition, the margins can be specified for all four sides at once with the margin shorthand. Margins can be negative, and initially margins are 0.

It is important to note that in CSS, margins collapse vertically (except where one or more of the margins is a floating margin). This means that where two margins adjoin vertically, the margin is not equal to the combined total of the two margins, but rather to the larger of the two (except where both margins are negative, in which case the combined margin is equal to the most negative of the two margins; and where one margin is negative and the other positive, the combined margin is equal to the two margins added together). However, margins between floated or positioned elements and any other element do not collapse.

Margin examples

P {margin-left: 2in}

This would give P a left margin of 2 inches.

P {margin: 1em}

This would make all four of P's margins 1 em wide.

P {margin: 1px 2in 3cm 4pt}

This would give P a top margin of one pixel, a right margin of 2 inches, a bottom margin of 3 cm and a left margin of 4 points.

P {margin-top: 1in;
margin-bottom: .5in}

<P>
  Some text
</P>
<P>
  Some more text
</p>

The combined margin here would be 1 inch because of margin collapsing.

Padding

Padding differs from margins insofar as padding does not collapse. In addition, although it is usually impossible to distinguish between padding and margin on the screen, padding is of crucial importance when an element has a rendered border, such as in a table or box, or where the element has a different background color from its parent.

As before, padding-left, padding-right, padding-top, padding-bottom or the padding shortcut can all be specified. If a percentage is specified, it relates to the width

of the containing block.

Padding cannot be negative, and initially padding is 0, although browsers' built-in style sheets may increase this for certain elements.

Border

The relevant details here are the width, color and style of the border.

The border width is specified with border-bottom-width, border-top-width, border-left-width, border-right-width, or the border-width shorthand, which allows specification of 1-4 widths, applied according to the rules stated under Box shorthands.

It should be noted that percentages cannot be specified and nor can negative lengths, and that width can be alternatively (rather than as a length) be specified as thin, thick or medium, where medium is the initial value.

For example: P {border-width: 10px}.

To make the border visible, one must specify a border style.

Border styles are specified using border-left-style, border-right-style, border-bottom-style, border-top-style and border-style. Valid border styles are none, hidden (same as none except on tables), dotted, dashed, solid, double (two lines), groove (the border appears to be carved into the screen), ridge (the border appears to be coming out of the screen), inset (the entire box appears to be carved into the screen), or outset (the entire box appears to be coming out of the screen).

Initially the border-style is set to none, so if you fail to override this, no border will be drawn.

You can specify up to four border styles, which are applied according to the rules stated above under Box Shorthands.

For example: P {border-style: solid}.

Note that if border-style: none (i.e., if border-style: none is not specifically overridden), this overrides any specified border-width, and makes them 0.

You can also specify a color with border-left-color, border-right-color, border-top-color, border-bottom-color or border-color. You can specify up to four colors, which are applied according to the rules stated above under Box Shorthands or transparent. Initially the border color is set to the element's color.

For example: P {border-color: red}.

You can set the border style, color and width simultaneously with the border-left, border-right, border-bottom, border-top or border shorthands. It should be noted that only one of each can be specified - if you use the border shortcut, you are giving each side the same width of border, the same color and the same style.

BODY {border-left: thick} /* Since border style has not been specified, this would result in no border. */



Be the first one to comment on this page.




  CSS 2.0 eBooks
More Links » »
 
 CSS 2.0 FAQs
More Links » »
 
 CSS 2.0 Interview Questions
More Links » »
 
 CSS 2.0 Articles

No CSS 2.0 Articles could be found as of now.

 
 CSS 2.0 News

No News on CSS 2.0 could be found as of now.

 
 CSS 2.0 Jobs

No CSS 2.0 Articles could be found as of now.


Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • connotea
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Netvouz
  • RawSugar
  • Reddit
  • scuttle
  • Shadows
  • Simpy
  • Smarking
  • Spurl
  • TailRank
  • Wists
  • YahooMyWeb

Previoushome Next

Keywords: CSS2 Properties - the box model, CSS2, css2, CSS2 tutorial, CSS2 tutorial pdf, history of CSS2, Custamizing Style Sheet, learn CSS2

HTML Quizzes
HTML Quiz
XHTML Quiz
CSS Quiz
TCP/IP Quiz
CSS 1.0 Quiz
CSS 2.0 Quiz
HLML Quiz
XML Quizzes
XML Quiz
XSL Quiz
XSLT Quiz
DTD Quiz
Schema Quiz
XForms Quiz
XSL-FO Quiz
XML DOM Quiz
XLink Quiz
XQuery Quiz
XPath Quiz
XPointer Quiz
RDF Quiz
SOAP Quiz
WSDL Quiz
RSS Quiz
WAP Quiz
Web Services Quiz
Browser Scripting Quizzes
JavaScript Quiz
VBScript Quiz
DHTML Quiz
HTML DOM Quiz
WMLScript Quiz
E4X Quiz
Server Scripting Quizzes
ASP Quiz
PERL Quiz
SQL Quiz
ADO Quiz
CVS Quiz
Python Quiz
Apple Script Quiz
PL/SQL Quiz
SQL Server Quiz
PHP Quiz
.NET (dotnet) Quizzes
Microsoft.Net Quiz
ASP.Net Quiz
.Net Mobile Quiz
C# : C Sharp Quiz
ADO.NET Quiz
VB.NET Quiz
VC++ Quiz
Multimedia Quizzes
SVG Quiz
Flash Quiz
Media Quiz
SMIL Quiz
Photoshop Quiz
Gimp Quiz
Matlab Quiz
Gnuplot Programming Quiz
GIF Animation Quiz
Scientific Visualization Quiz
Graphics Quiz
Web Building Quizzes
Web Browsers Quiz
Web Hosting Quiz
W3C Quiz
Web Building Quiz
Web Quality Quiz
Web Semantic Quiz
Web Careers Quiz
Weblogic Quiz
SEO Quiz
Web Site Hosting Quiz
Domain Name Quiz
Java Quizzes
Java Quiz
JSP Quiz
Servlets Quiz
Struts Quiz
EJB Quiz
JMS Quiz
JMX Quiz
Eclipse Quiz
J2ME Quiz
JBOSS Quiz
Programming Langauges Quizzes
C Quiz
C++ Quiz
Visual Basic Quiz
Data Structures Using C Quiz
Cobol Quiz
Assembly Language Quiz
Mainframe Quiz
Forth Programming Quiz
Lisp Programming Quiz
Pascal Quiz
Delphi Quiz
Fortran Quiz
OOPs Quiz
Data Warehousing Quiz
CGI Programming Quiz
Emacs Quiz
Gnome Quiz
ILU Quiz
Soft Skills Quizzes
Communication Skills Quiz
Time Management Quiz
Project Management Quiz
Team Work Quiz
Leadership Skills Quiz
Corporate Communication Quiz
Negotiation Skills Quiz
Database Quizzes
Oracle Quiz
MySQL Quiz
Operating System Quizzes
BSD Quiz
Symbian Quiz
Unix Quiz
Internet Quiz
IP-Masquerading Quiz
IPC Quiz
MIDI Quiz
Software Testing Quizzes
Testing Quiz
Firewalls Quiz
SAP Module Quizzes
ERP Quiz
ABAP Quiz
Business Warehousing Quiz
SAP Basis Quiz
Material Management Quiz
Sales & Distribution Quiz
Human Resource Quiz
Netweaver Quiz
Customer Relationship Management Quiz
Production and Planning Quiz
Networking Programming Quizzes
Corba Quiz
Networking Quiz
Microsoft Office Quizzes
Microsoft Word Quiz
Microsoft Outlook Quiz
Microsoft PowerPoint Quiz
Microsoft Publisher Quiz
Microsoft Excel Quiz
Microsoft Front Page Quiz
Microsoft InfoPath Quiz
Microsoft Access Quiz
Accounting Quizzes
Financial Accounting Quiz
Managerial Accounting Quiz
Testimonials | Contact Us | Link to Us | Site Map
Copyright 2008. Academic Tutorials.com. All rights reserved Privacy Policies | About Us
Our Portals : Academic Tutorials | Best eBooksworld | Beyond Stats | City Details | Interview Questions | Discussions World | Excellent Mobiles | Free Bangalore | Give Me The Code | Gog Logo | Indian Free Ads | Jobs Assist | New Interview Questions | One Stop FAQs | One Stop GATE | One Stop GRE | One Stop IAS | One Stop MBA | One Stop SAP | One Stop Testing | Webhosting in India | Dedicated Server in India | Sirf Dosti | Source Codes World | Tasty Food | Tech Archive | Testing Interview Questions | Tests World | The Galz | Top Masala | Vyom | Vyom eBooks | Vyom International | Vyom Links | Vyoms | Vyom World
Copyright 2003-2017 Vyom Technosoft Pvt. Ltd., All Rights Reserved.