Basics of HTML

  1. Terms and Definitions
  2. Principles of WEB 2.0
  3. The structure of the HTML-document
  4. Main metatags
  5. Formatting Text HTML
  6. Lists html-page
  7. Text fixed format
  8. Selected text html-page
  9. Change font options
  10. Graphics html-page
  11. Tables html-page
  12. Hyperlinks
  13. IMAGEMAP
  14. Frames

CSS-based

  1. What is CSS
  2. CSS syntax
  3. Style classes
  4. Combined styles
  5. CSS table
  6. CSS cascading rules
  7. Recommendations applying styles
  8. Font options
  9. Line breaks, vertical alignment
  10. Background settings
  11. Parameters of the paragraph
  12. List options
  13. The parameters of the cursor
  14. Options indentation
  15. Parameters frame
  16. Parameters selection
  17. Display options
  18. Containers


   

Options indentation

In CSS3 margins are of two types - internal and external.

padding - the distance between the imaginary boundary web element and its content.

External indent - the distance between the imaginary boundary web element and the border of the neighboring web element.

The best way to understand the difference between inside and outside can be indented by the example of a cell of the table.

The internal padding is specified by the style padding . The indentation can be specified in absolute terms and relative. The value of auto specifies the zero padding.

EXAMPLE:

P	{
	padding-left: 4px;
	padding-top: 2px
	}

The style attribute padding indicates the padding on all sides by a web element:

padding: <indent 1>[<indent 2>[<indent 3>[<indent 4>]]]
EXAMPLE:

.class1 {padding: 1px 1px 1px 1px} - the first value sets the top padding; the second - Right; the third - from the bottom; the fourth - to the left;
.class2 {padding: 1px 1px 1px} - the first value sets the top padding; the second - on the left and the right; the third - from the bottom;
.class3 {padding: 1px 1px} - the first value sets the padding top and bottom; the second - on the left and the right;
.class4 {padding: 1px} - the only value is the padding on all sides of the web member.

The outer margins are specified style attribute margin , the values of which are identical to padding .

The only difference is margin from padding is that as the values of the external margins can be set negative values.

EXAMPLE:

OL {margin-top: -5px}

In this example, the browser removes the margins at the top, which were set by default.

It should be borne in mind that the style attributes margin-left; margin-top; margin-right; margin-bottom; margin does not apply to jobs at the outer margins of table cells. For these purposes should be applied attribute ners border-spacing , which will be discussed later.

When working with indents have to be very careful, because they increase the size of the element html-pages, which are used. If the margins are set to block elements html-pages that form the design html-pages, that must be changed and the size of these elements, otherwise the page design can be broken.

The web designer should be very careful if he uses indentation for web elements, the dimensions of which are defined in relative terms. The fact that the browser first calculates the absolute size of the element, and then adds to it the indentation. As a result of these actions the browser element sizes become larger than they were originally given. If this applies to the element, the width of which is 100%, then after adding thereto indentation width of the element becomes more than 100%, i.e. he does not fit in the browser window, the result will be a horizontal scrollbar, which is a sign of bad web design.


TOP ↑