The Missing Manual MARGINS, PADDING, & BORDERS—CHAPTER 7

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 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 Model Border Padding 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; 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 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 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 Page Text 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:,,,, 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:,,, 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 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; border: 5px; margin: 10px; Width = 100 Padding – 30 Border =10 Margin = 20 TOTAL: 160

Problem/Solution (see page ) 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.. 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)