mod_rewrite module allows to manipulate url using unlimited number of rules . Each rule consist of unlimited number of condition

Problems

This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

Every element is essentially rendered as a box. Each box has properties which are applied to both an inner (content) and outer part (margin, border, and padding). The overflow determines what happens when content is larger than the its inner box (the default it to show the overflowing content which can have disastrous affects with images)

The image below illustrates the box model:

Explanation of the different parts:

    Content - The content of the box, where text and images appear
    Padding - Clears an area around the content. The padding is transparent
    Border - A border that goes around the padding and content
    Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Example
div {
      width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Note : Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Assume we want to style a <div> element to have a total width of 350px:
Example
div {
      width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Here is the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Note for old IE: Internet Explorer 8 and earlier versions, include padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.

MARGIN

The CSS margin properties are used to generate space around elements.

The margin properties set the size of the white space OUTSIDE the border.The margins are completely transparent - and cannot have a background color!

With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

Example
div{
    margin: 100px;
}

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

      margin-top
    margin-right
    margin-bottom
    margin-left
Example
p {
    margin: 100px 150px 100px 80px;
}

So, here is how it works:

If the margin property has four values:

    margin: 25px 50px 75px 100px;
        top margin is 25px
        right margin is 50px
        bottom margin is 75px
        left margin is 100px

If the margin property has three values:

    margin: 25px 50px 75px;
        top margin is 25px
        right and left margins are 50px
        bottom margin is 75px

If the margin property has two values:

    margin: 25px 50px;
        top and bottom margins are 25px
        right and left margins are 50px

If the margin property has one value:

    margin: 25px;
        all four margins are 25px

Use of The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
Example
div {
      width: 300px;
    margin: auto;
    border: 1px solid red;
}

Padding

The CSS padding properties are used to generate space around content.

The padding properties set the size of the white space between the element content and the element border.
The CSS padding properties define the white space between the element content and the element border.

The padding clears an area around the content (inside the border) of an element.
Note: The padding is affected by the background color of the element!

With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

Example
div{
    padding: 100px;
}

Padding - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

      Padding-top
    padding-right
    padding-bottom
    padding-leftIt's Shorthand property is similar to that of margin

Syntax

No comments:

Post a Comment