Question

In order to answer the following questions, you may wish to read about margin, padding and about border and border shortcut. 

1. Describe (in English) what the following CSS declarations do?

- padding: 5px 30px 20px 5px;

- margin: 0.25em 1em;

- border: thin solid blue;

2. Below, we have CSS declarations that assign a value made of 4 sizes to each of the two properties margin and padding. Can you rewrite these CSS declarations such that the two properties margin and padding are each assigned a value composed of fewer than 4 sizes?

- margin: 10px 12px 8px 12px?

- padding: 10px 12px 10px 12px?

3. Web browsers read CSS stylesheets from top to bottom and apply each CSS declaration as they read them. So if we create this CSS style rule:

some_selector {

padding: 25px;

padding-left: 80px;

}

what would the result be? Describe the result.

4. And if we create this CSS style rule:

some_selector {

padding-left: 80px;

padding: 25 px

}

would the result be the same as in Question 3?

Answer 1

All html elements can be considered as boxes. The css box model represents the layout of the site. It consists of margins,borders,paddings and the actual content.

See in image

Margin (transparent). Border TOP 1 Padding - CONTENT LEFT RIGHT I BOTTOM

All these properties work in same order - top, right,bottom and left.

Margin

The css margin properties are used to create space around elements, outside of defined borders.

For specifying the margin for each side of an element :

margin-top, margin right, margin-bottom, margin-left

All the margin properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

Margin Shorthand property

You can specify all the margin properties in one property.

margin: 20px 40px 65px 60px;

here margin have four values

• top margin is 20px
• left margin is 40px
• bottom margin is 65px
• left margin is 60px

If the margin property have three values:

margin:20px 40px 70px;

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

If the margin property has two values:

margin:20px 40px;

• top and bottom margins are 25px
• right and left margin are 50px

If the margin property has one vlaue:

margin:20px;

• All four margin are 25px

You can also set the margin to auto to horizontally center the element wits its container.

The inherit value take the value from parent elemet.

Note: Negative values are allow.

Css Padding

The css padding properties are used to generate space around an element's content, inside of any defined borders.

padding-top, padding-right, padding-bottom, padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• inherit - specifies that the padding should be inherited from the parent element
• % - specifies a padding in % of the width of the containing element

Note: Negative values are not allowed.

Padding Shorthand property can specify same as margin shorthand property.

Css Border Properties

The css border properties allow you to specify the style, width and color of an element's border.

Border Width

The properties for the border can be set separately. The border-width property specifies the width of the border.

border-width:2px;

Border Color

The border color of the element can be defined using a color name, RGB, or Hex values.

border-color: red;

The border-style Property

The default value of border-style is none, which defines no border.
There are various styles supported for the border-style property:

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value

CSS Border - Individual Sides

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

• border-top-style: solid;
• border-right-style: none;
•   border-bottom-style: dotted;
•   border-left-style: solid;

If the border-style property has four values:

border-style: dotted solid double dashed;

• top border is dotted
• right border is solid
• bottom border is double
• left border is dashed

If the border-style property has three values:

border-style: dotted solid double;

• top border is dotted
• right and left borders are solid
• bottom border is double

If the border-style property has two values:

border-style: dotted solid;

• top and bottom borders are dotted
• right and left borders are solid

If the border-style property has one value:

border-style: dotted;

• all four borders are dotted

The border property shown here also work same for border-width and border-color.

CSS Border - Shorthand Property

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

• border-width
• border-style
• border-color

Q1.

padding:5px 30px 20px 5px;

here padding genrate space around the element.

• top padding is 5px
• right padding is 30px
• bottom padding is 20px
• left padding is 5px

margin:0.25em 1em;

here margin properties create space around elements, outside of any defind borders.

here

• top and bottom margin are 0.25em
• right and left margin are 1em

border:thin solid blue;

this css border property make a solid thin blue color border around the element.

Q2.

marigin:11px 10px;

padding:11px 11px;

Q3.

some_selector{

padding:25px;

padding-left:80px

}

here padding top,right bottom be 25px and padding left be 80px becaus the browser accept the last value you set.

Q4.

some_selector{

padding-left:80px

padding:25px;

}

here result be the all padding 25px.Stats

The result is different from Q3.