the Print
Make sure the printer
Tricky Terms
Default Settings Settings that are standard or pre-def
Margins The amount of white space between the text
Orientation The direction (along the length or along
ne Spacing The amount of white space between th
Paragraph Spacing The amount of white space bet
Alignment The manner in which text is placed betw
orizontal Alignment The position of text in relati
ucal Alignment The position of text in relation
Answers
Answer:
Explanation:
The box model is a very important concept, one that you must have right in your head before you start tackling all this spacing stuff. All HTML block-level elements have five spacing properties: height, width, margin, border and padding. When discussing these attributes you'll need a diagram to see what part of the spacing we're talking about. Have a look at the diagram below and check out the three areas that surround every block-level page element. Together, they form the box that the element takes up.
CSS Borders are discussed in a separate tutorial. As you can see, margins set the outwards spacing, and padding the inwards. If margin, border and padding widths were all set at 0 width, the box would be right around the element. You can control each of the three spacing variables independently.
When using these properties, we're primarily working with the <div> tag, which you may not have been properly introduced to yet. These DIVisions are the ultimate block-level tag, as they can contain whole pages within them. You can wrap divs around large blocks of text and style away. divs are used to create what used to be known as layers, and can be used as a replacement for tabled layout. We get down to that fully in CSS Layout.
Default margins, borders and padding are all 0, so when you wrap a div around some text, there is no space between its edges and the text. div elements obey the box model strictly, while adding padding etc. to table cells can be interpreted a bit more loosely by browsers. Default widths for all block-level elements are 100%. The height of an element relies entirely on its contents.
All block-level elements also have the properties width and height. The margins, borders and padding you add to each element are then added on to these dimensions. Say you define a paragraph,
p {width: 600px; padding: 5px; }
This paragraph will take up 610 horizontal pixels on the page, as a padding of 5 pixels is added on to each side.
Margins
To set a common-width margin around the box, use an expression like
blockquote {margin: 20px; }
That will push everything away from the element by 20 pixels in every direction. You can set the margin on each side of the box to a different size if you want, by suffixing the side you want affected. So,
p {margin-left: 2px; margin-top: 80px; margin-right: 45px; margin-bottom: -5px; }
The units available to you are the same as always. When specifying separate sides, you don't need to set each value. Your browser will set those left out with its default value for that side, like it always does. Margins can be added to anything — tables, graphics, text; the lot. Also, as above you can give an element a negative margin.
Your browser has a default stylesheet built in, and gives margins to certain elements, like forms and headings. By setting these to 0 in your stylesheet, you can take away the default space that gets put in after these elements. Negative margins allows you to overlap things too, but is not the best method to do so because of browser inconsistencies and what have you — use positioning to achieve all that.
The body tag itself has had some default margins since the dawn of HTML. We used to get rid of these with the topmargin and marginheight attributes et al — a very non-standards-compliant way to go about things. Now we can get rid of this space around your page with a simple CSS declaration: