CSS Box Model & Visibility W3C
All html elements are considered to be separate boxes (either block or inline). You can position, float and style each of the elements.
Properties and Values
- position
value: static | relative | absolute | fixed (static is the default) - display
value: block | inline - float
value: left | right - clear
value: left | right | both - width
- max- width
- min-width
- height
height and width values:length (px or em) | percentage | auto - margin-top
- margin-right
- margin-bottom
- margin-left
- margin
margin values:length (px or em) | percentage | auto - padding-top
- padding-right
- padding-bottom
- padding-left
- padding
paddingvalues:length (px or em) | percentage | auto - border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-width
border-width values: thin | medium | thick |length (px or em) - border-top-color
- border-right-color
- border-bottom-color
- border-left-color
- border-color
color values: color property - border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- border-style
border-style values: none | dotted | dashed | solid | double | groove | ridge | inset | outset - overflow
value: visible | hidden | scroll | auto
Position
Positions allow you to position elements and also stack them using the z-index. Elements are positioned using the top, bottom, left, and right properties
- Static: the default the element stays within the flow
- Relative: position is within the flow and is relative to its inital position.
- Absolute: completely out of the flow of the rest of the information. It is relative to its parent when the parent has a position other than static.
- Fixed: completely out of the flow of the rest of the information.It is positioned relative to the browser's window and will be visable even when the user scrolls.
z-index
The z-index allows you to stack elements on top of each other. The lowest element has the lowest number. Negative numbers can be used. In order to use the z-index the element must have a position. The other elements that are within the stacking order must also have a position. In the example below A is the lower element in the stack.
A{ position: relative; z-index: 1;
B{ position: relative; z-index: 2;
Float
In order to have elements placed next to each other without using properties you need to use a float. Elements that are floated, automatically become a block unless otherwise stated in the display property. Elements can only be floated left or right, not up or down.
The floated element needs to be placed in the code before the element that you want it to float next to. For example when floating an image within text the image needs to go first
Clear
All elements after the floated element will flow around the floated element if there is enough space. This could include elements that you do not want to flow around the floated element. If you want to avoid this you need to use the clear property.
selector{
width: 500px;
height: auto;
border-style: solid;
border-color:#F60;
border-width: 2px;
padding: 20px;
}
Individual sides can be written for top, right,bottom, left:
border-left-style: solid;
BORDER: The border is the red outline around this box. The border style is solid which creates a single line around the box.
PADDING:
The padding is the space between the text (or other content) and the border.
WIDTH:
The original width of the box was 500px but once borders and padding are added the box gets wider:
500 width
004 borders left and right
040 padding left and right
_______
544 total width of the box
In IE6 (I know why bother) the width remains 500px and the content area is reduced in size as you include borders and padding.
HEIGHT: The height is set to auto and it will expand depending upon the content.
f you wish the height to be a 100% you would also need to attribute100% to both the body and the html:
The following box has a left margin. Margins are between elements and do not effect the size of the box.
margin-left: 20px;
border-style: double;
border-style: dashed;
The appearance of the following borders does not work well in most designs and can be displayed differently in some browsers.
They also look rather tacky.
border-style: groove;
border-style: ridge;
border-style: inset
border-style: outset;
Collapsing Margins
Two touching margins with positive values
When there are two vertical elements with touching margins then the margins collapse (combine to form a single margin) and take on the size of the larger margin .
Two touching margins with negative values
Take on the margin with the highest value
Two touching margins, one with a positive value and another with a negative value: margins are added together to get the final value
Collasping margins do not apply to the following:
- absolutely positioned elements
- floated elements
- inline-block elements
Outlines
You cannot define a side (left, right, top, bottom) for an outline. An outline is always on all sides
Outlines do not increase the size of the box or really take up any space.
Both of the boxes below have a margin-left of 20px. The outline is actually in part of the margin area.
If I only include one break below this text the outline will cover part of the text.
The blue area is the outline
margin-left: 20px;
margin-left: 20px;
Visibility
When using the box as a main layout element how do you get your text to stay in the box. the easist way to do this is to just give to this:
selector{
height: auto;
}
Overflow Property
The values for the overflow propertiy are: visible, hidden, scroll, auto
selector{
overflow: visible;
}
visible
If give your box a height this value insures that all of the content will show even if it is more than the height of the box. The content will overlap beyond the box.
selector{
overflow: visible;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus tempor sem, in pulvinar massa eleifend ornare. Sed sit amet feugiat est. Quisque suscipit purus vitae augue viverra ornare.
hidden
Any additional content that takes up more space than the boxes height is cut off
selector{
overflow: hidden;
}
scroll
This value allows the content to scroll
selector{
overflow: scroll;
} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus tempor sem, in pulvinar massa eleifend ornare. Sed sit amet feugiat est. Quisque suscipit purus vitae augue viverra ornare. Praesent magna est, ultricies eu commodo facilisis, facilisis sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac augue turpis, id laoreet nulla. Aliquam erat volutpat. Vestibulum nec tortor augue. Vivamus euismod tincidunt pellentesque. Nulla id nunc id elit blandit varius vel sit amet tellus.
Quisque suscipit purus vitae augue viverra ornare. Praesent magna est, ultricies eu commodo facilisis, facilisis sit amet ligula.
auto
This value is browser dependent and could cause the content to scroll
selector{
overflow: auto;
}
height auto - do not include the overflow property
If you just want the box to get bigger to accommodate the content then do not include the overflow property in the styles and place the height of the box at auto
height: auto; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus tempor sem, in pulvinar massa eleifend ornare. Sed sit amet feugiat est. Quisque suscipit purus vitae augue viverra ornare. Praesent magna est, ultricies eu commodo facilisis, facilisis sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac augue turpis, id laoreet nulla. Aliquam erat volutpat. Vestibulum nec tortor augue. Vivamus euismod tincidunt pellentesque. Nulla id nunc id elit blandit varius vel sit amet tellus. Quisque suscipit purus vitae augue viverra ornare. Praesent magna est, ultricies eu commodo facilisis, facilisis sit amet ligula.