The Missing Manual

MARGINS, PADDING, & BORDERS—CHAPTER 7

Understanding the Box ModelBrowsers treat all tags as boxesBoxes, to a browser, contain something

(img, text, etc.) inside themSurrounding the content are different

properties that make up the boxPadding – Space between content and its borderBorder – Line drawn around each edge of the

boxBackground-color – Fills the space inside the

border including the paddingMargin – Separates one tag from another tag

Margins

If you do not

adjust the

properties

(Margin, Border,

Padding, Content)

You are subject to

the browsers’

default settings.

Browsers do not

apply both

padding and a

border to any

tag.

Box ModelBorder

Padding

Content

Control Space with Margins and PaddingPadding and Margins function in a similar

mannerUnless you apply a background color, you don’t

know where one begins and the other endsIf you place a border around the content, and

color either the background or the border, you can tell where one begins and the other ends.Padding – keeps content from seeming crampedMargins – add white space (gutter) between

elements making the pages seem lighterFour (4) properties control margins, padding, and

borders

Margin and Padding ShorthandTop, Right, Bottom, Leftmargin: 0 10px 10px 20px;padding: 10px 5px 5px 10px;

If the values will be 0 then you don’t have to list all sides margin: 0; padding: 0;

To Remember: TRouBLe Can also use – margin: 0 2em;

top right bottom left

Logo

Side Bar

To get a logo, banner, or side bar to butt up against the edge of a page, set the margins

and padding to 0

Pixels vs PercentagesPixels are exact measurements

The size of the body fills the browser window, and the window size is set for 800 x 600 pixels, it is easy to calculate how much is being used by margins, padding, etc.

Percentages--browsers calculate the amount of space based on the width of the containing element.If the browser window is set at 760 px, and the

margin is set at 10%, the browser will add 76 px to the styled element.

When the window is resized, the margin size is recalculated to 10% of the changed value

HOWEVER, the containing element is not always the width of the browser window. A sidebar may be set at 300 px.

More Confusion—top and bottom percentage values are calculated based on the width of the containing element, not its height. A 20% top margin is based on the width of the containing element, say 300px = 60 px

Colliding MarginsWhen the bottom margin of one element

touches the top margin of anotherInstead of adding the two margins together,

web browsers apply the larger of the two margins.TO PREVENT: Use padding insteadCOLLAPSING MARGINS: When two margins

become oneBox within a boxBox within a <div> tag

SOLUTION: Add a border or padding only

Left and Right margins, etc. do not collapse or collide

Removing Space with Negative MarginsA negative margin removes space

Allowing paragraphs or lines of text to overlapAllowing words to overlapAllowing text to overlap an image or logoCause to image/text to disappear off the edge of

a pageCause to image/text to poke outside of a side barCause a line of text to look as if it is underlined

when it actually uses the top border of the line of text below. This allows you to set the underline to extend beyond the text line.

Performing this action allows the bottom tails of text to fall below the underline.

Padding Cannot be NegativeTherefore, you must work with margins to

cause text to fit closer to other elements.

Affecting the text with differing or contrasting color and then moving the text to overlap can cause an interesting appearance.

Web Page TextWeb Page TextPassion PerfectPassion Perfect

Displaying Inline and Block-Level BoxesBlock and Inline boxes = block and inline

tagsBlock-Level Tag: Creates a break before

and after itselfExamples: <p>, <div>, <ol>, <ul>, <table>

Inline Tag: Do not create a break before or after the tag. They appear on the same line as the content tags that are beside them.Examples: <strong>, <em>,<img>, <a>

Block and Inline boxes work the same way

Block-Level and Inline BoxesYou can add color, fonts, backgrounds and

borders to both types of boxes.Margins and Padding are different

Browsers handle inline boxes differentlyYou can add space using margins and

padding to the right or the left. Browsers ignore these commands.

You CANNOT increase the height of an inline box

The only time the height will alter is if an <img> or text is inserted, then the box will expand to accommodate the height of the image.

Block-Level and Inline Boxes (cont’d)If you want to treat an inline element like a

block element or vice versa,Use the “display” propertyMake a block-level element act like an inline

elementdisplay: inline;

Make an inline element act like a block element.display: block;

There are many more options, but they are not supported in today’s browsers, EXCEPT for the value “none”However this element is also used in conjunction with

javascript.

BordersAdd to all four sidesAdd only to one side (or any combination of sides)Control with color, width, and style

STYLES: Solid Dotted Dashed Double Groove Ridge Inset Outset None (useful for turning off a single border) Hidden (I have no idea what this would be used for—maybe the

textbook has an idea)

Border Property ShorthandBorder: 4px solid #ccc

The order you use does not matterFormat individual borders

border-top border-bottom border-right border- left

Can set all four borders and then override the look of a single border Make sure the more general or global settings come first,

then set the specific settings Also, the position of these declarations (border-top, etc.)

make a difference,

You can define individual colors and styles for each borderBorder-width: 2px;border-style: double;border-color: #ffcc33;

Each border edge has its own set of three propertiesborder-left-style;border-left-width;border-left=color;

Coloring the BackgroundWhen using background colors and

borders together, remember that if the border style is dashed or dotted, the background color will show or bleed within the gaps.

Determining the Height and WidthThese declarations assign dimensions to

an object, such as a table, column, banner, or sidebar.

Add the properties to a stylewidth: 300px;width: 30%;height: 20em;

Calculating a Box’s Actual Width and Height

There is a difference between the width and height you set for an element and the amount of space a browser allows or uses for that element (box).EXAMPLE:

margin: 10px;border-width: 5px;padding: 15px;width: 100px;

Calculating each side of the Width separately--

width: 100px; set for the content

padding: 15px;

border: 5px;

margin: 10px;

Width = 100Padding – 30Border =10Margin = 20TOTAL: 160

Problem/Solution (see page 164-165)

Internet Explorer older that version 6 will get the whole thing wrong

Versions 5 and 5.5 subtract the padding and the border widths. Thus it sets aside only 120px of width for the web page.

Versions 6 and later set aside the whole 160px of width.To Solve:

Don’t‘ apply padding or border to a style with a width/height

Use two tags—one for width/height and another for padding and borders

HeightBy now you have figured out that height is

the trickier of the two dimensionsYou have to be SURE of the exact height

of the contents of the tag (impossible at best if using text, as you may edit that text)

Size is also predicated on what the user has set as her/his browser’s font size.

The result is often the Tap or Overflow

Controlling the Tap with the Overflow PropertyWhen content is larger than the boxes

width/height, some browsers just let the box expand to accommodate the text,

Other browsers cause the text to spill out of the box, or overflow.

TO CONTROL: Use the “overflow” propertyFour (4) keywords control this property

Visible – what browsers do normally, so does not solve the problem

Scroll – lets you add scroll bars Auto – makes scroll bars optional (adds them if needed) Hidden – hides any content that extends outside the box

The FloatWrapping Content with Floating Elements:

Normal flow of a web page is top to bottom—word processing-type of display

The FLOAT property moves elements to either the left or right side.

Content on either side of the element moves up and wraps around the floated element. Great for moving supplemental information out of the

way Images move to either side of the page and the text

wraps around them.Basic FLOAT property

float: left; float: right: float: none;

Source Order is VERY ImportantThe floated tag must appear before the HTML

of any content that wraps around the floated element.If floating an image, text related to that image must

be placed below the float tag, i.e. <p> <ol> <table>.

Backgrounds and Borders DO NOT float in the same way as other page elements. If you float a side bar to the left, the content under the

sidebar will wrap around on the right. If the content has a border or a background graphic,

they will remain under the sidebar

To Correct The Border/Background FloatAdd one rule to the style that has the background

or borders running underneath the floatOnce you locate the style, add this line:

overflow: hidden;The overflow makes any background or border

that extends underneath the float disappear.Another approach is to add a border around the

floated elementMaking this border thick enough and the same color

as the background, the border looks like empty space.

Thus hiding the background or border that is hanging underneath the floated element.

Stopping the FloatYou may need to tell a tag to ignore a floated

element.You may want a copyright notice or a contact

notice to remain at the bottom of the browser window

A floated, tall sidebar may draw the above elements up the page

Consequently, you want the copyright or contact to refuse to wrap around the floated element

Sometimes you have more than one floated element on your page and you want to control how and where they float

The CLEAR PropertyInstructs an element to not wrap around a floated

item.The clear property accepts the following options:

Left: Style will drop below elements that are floated left, but will wrap around right-floating elements.

Right: forces a drop below right-floated objects will wrap around a left floated element.

Both: forces a drop below both left- and right-floated elements

None: turns off clearing altogether. In other words, it makes an item wrap around both left- and right-floated objects. (which is how web browsers normally work)