MARGINS, PADDING, &
BORDERS—CHAPTER 7
The Missing Manual
Understanding the Box Model
 Browsers treat all tags as boxes
 Boxes, to a browser, contain something (img, text,
etc.) inside them
 Surrounding the content are different properties
that make up the box
 Padding – Space between content and its border
 Border – Line drawn around each edge of the box
 Background-color – Fills the space inside the border
including the padding
 Margin – Separates one tag from another tag
 Margins
Box Model
If you do not adjust
Border
Padding
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.
Content
Control Space with Margins and Padding
 Padding and Margins function in a similar manner
 Unless you apply a background color, you don’t
know where one begins and the other ends
 If 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 cramped
 Margins – add white space (gutter) between elements
making the pages seem lighter
 Four (4) properties control margins, padding, and borders
Margin and Padding Shorthand
 Top, Right, Bottom, Left
 margin: 0 10px 10px 20px;
 padding: 10px 5px 5px 10px;
top right bottom left
 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;

Logo
To get a logo, banner, or side bar to butt up against the
Side Bar
edge of a page, set the margins and padding to 0
Pixels vs Percentages
 Pixels 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 Margins
 When the bottom margin of one element touches
the top margin of another
 Instead of adding the two margins together, web
browsers apply the larger of the two margins.
 TO PREVENT: Use padding instead
 COLLAPSING MARGINS: When two margins
become one
 Box within a box
 Box 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 Margins
 A negative margin removes space
 Allowing paragraphs or lines of text to overlap
 Allowing words to overlap
 Allowing text to overlap an image or logo
 Cause to image/text to disappear off the edge of a page
 Cause to image/text to poke outside of a side bar
 Cause 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 Negative
 Therefore, 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
WebPage
PageText
Text
Passion Perfect
Passion Perfect
Displaying Inline and Block-Level Boxes
 Block and Inline boxes = block and inline tags
 Block-Level Tag: Creates a break before and after
itself
 Examples: <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 Boxes
 You can add color, fonts, backgrounds and borders
to both types of boxes.
 Margins and Padding are different
 Browsers handle inline boxes differently
 You 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” property
 Make a block-level element act like an inline element
 display: 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.
Borders
 Add to all four sides
 Add 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 Shorthand
 Border: 4px solid #ccc
 The order you use does not matter
 Format 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
border
 Border-width: 2px;
 border-style: double;
 border-color: #ffcc33;
 Each border edge has its own set of three
properties
 border-left-style;
 border-left-width;
 border-left=color;
Coloring the Background
 When 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 Width
 These declarations assign dimensions to an object,
such as a table, column, banner, or sidebar.
 Add the properties to a style
 width: 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;
margin: 10px;
border: 5px;
Width = 100
Padding – 30
Border =10
Margin = 20
TOTAL: 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
Height
 By now you have figured out that height is the
trickier of the two dimensions
 You 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
Property
 When 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” property
 Four (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 Float
 Wrapping 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 Important
 The 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 Float
 Add one rule to the style that has the background
or borders running underneath the float
 Once 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 element
 Making 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 Float
 You 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 Property
 Instructs 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)