CSS

CSS Box Model :(CSS Tutorials:part-9)

Written by Taj12

Every element of HTML has its own height, width, borders, padding and margin. To specify these properties there are some rules and these rules are described by the box model. Box model is the most important notion of the CSS. Here is a figure of a box model:

So, now you know the outside area is margin, the inside area of margin is border, the inside area of borders is padding and then the dimension is the height and the width.

Margin:

Now I am describing about the margin of a box. The margin is the outside space of the box relative with the browser window or another element. There are some margin properties:

  • margin-top :         Specifies top outside space
  • margin-bottom :    Specifies bottom outside space
  • margin-left :          Specifies left outside space
  • margin-right :        Specifies right outside space

 

The short hand declaration:

margin: top right bottom left

margin: top left&right bottom

margin: top&bottom left&right

margin: top&right&bottom&left

Example:

Shorthand example:

The unit of margin properties may be %, em, px. It supports the negative and auto value.

Borders:

You can seem borders as a wall surrounding a building. It is the area between margin and padding. Borders specify the actual area of a box. The   border properties are:

  • Border Width property
  • Border Style property
  • Border Color property

Border Width property:

Border width property specifies the width of the border. It may be em , px. It does not support % unit. Declaration format:

Shorthand property declaration format:

border-width: top right bottom left

Example of short hand:

Border Style property:

Border style property determines the style of border. Its value may be none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.

Example:
Shorthand example:

Border Color property:

Border color property gives color in the border.

Example:


Shorthand property example:

(see above example to understand shorthand
Declaration)

Shorthand declaration of Border property:

You can use a shorthand notation about border properties. It combines border-width, border-style and border-color properties.

Declaration format:

border: border-width border-style border-color

Example:

Padding:

The padding property specifies an area between content of box and borders. It does not support the negative and auto value. It can not collapse itself.

Example:

Shorthand property of padding:

Padding also support shorthand property,

Declaration format:

Padding: top right bottom left

Width property:

The width property specifies the width of the box. It supports %, em and px unit for it length.

Example:

Height property:

The height property specifies the height of the box. It supports %, em and px unit for it length.

Example:

Example of box model:

I am a box. I have margin top and bottom 80px and center position for left and right side relative with the browser. I have borders of red and 2px length, my distance is 20px from border and that is called padding. I have
400px width and 200px height.

</div>

</body>

</html>

 Output:

 

About the author

Taj12

4 Comments

  • If you wish for to take many from this post subsequently you must petition such strategies apt your won webpage.

  • Hi there,after reading this prodigious paragraph i am too delighted to share my familiarity here with colleagues.

  • I peruse this paragraph completely regarding the resemblance of most recent and previous technologies, it’s noteworthy treatise.

  • Hi there mates, its wonderful chip of writing almost tutoringand entirely explained,keep it up always the time.

Leave a Comment