CSS

CSS Box Model

CSS/CSS Box Model

All HTML elements can be considered as boxes but in CSS the team "box model " is used when you talk about the design and layout.

The CSS box shown is a box that wraps around HTML components and comprises margins border, padding, and the actual content.

Margin: The margin properties characterize the space between the edge of the border and adjacent elements. The area of the margin is decided by the margin-top, margin-bottom,  margin-right, margin-left, or margin properties shortly.

Properties

Description

margin-top

Set the amount of space between the edge of the top border and adjacent elements on the top.

margin-rights

Set the amount of space between the edge of the right border and adjacent elements on the right. 

margin-bottom set

Set the amount of space between the edge of the bottom border and adjacent elements on the bottom.

margin-leftist

Set the amount of space between the edge of the left border and adjacent elements on the left.

margin

Used to combine the various margin properties into a single rule. The first value to the top, the second value to the right, the third value for the bottom, and the last value on the left.



Border: The border properties define the size and style of the border (located between the padding and the margin).

Properties

Description

border-width

Set the width of the border. Border widths can be defined as a specific width, percentage, or pixels or by using pre-defined values, thin, medium, or thick.

border-color

Set the color of the border. The color can be set by:

  • name -specify a color name, for example, "black"
  • RGB - specify a RGB value , example "RGB(10,20,30)"
  • Hex - specify a Hex value , example "#fff"

border-style

Set the style for the border.

  • none: No border is drawn.
  • dotted: The border is a dotted line.
  • dashed: The border is a dashed line
  • solid: The border is a solid line.
  • double: The border is a double line
  • groove: The border is a 3-dimensioned groove drawn using color defined in the border
  • inset: The border is a 3-dimensioned inset drawn using color defined in the border
  • outset: The border is a 3-dimensioned outset drawn using color defined in the border

border-top

Used to combine the variety of border properties into a single rule for the top part of the border.

border-right

Used to combine the variety of border properties into a single rule for the right part of the border.

 border-bottom

Used to combine the variety of border properties into a single rule for the bottom part of the border.

border-left

Used to combine the variety of border properties into a single rule for the left part of the border.

border

Used to combine the variety of border properties into a single rule.



Padding: The padding properties define the space between the edge of the content and the border. The space can be defined by employing a particular length, a percentage, or “auto”. The density of the padding is decided by the padding-top, padding-right,  padding-bottom, padding-left, or padding properties shortly.

Properties

Description

padding-top

Set the amount of padding on the top.

Example

header

    {

      padding-top: 2px;

    }

padding-right

Set the amount of padding on the right.

Example

header

    {

      padding-right: 2px;

    }

padding-bottom

Set the amount of padding on the bottom.

Example

  header

    {

      padding-bottom: 2px;

    }

padding-left

Set the amount of padding on the left.

Example

  header

    {

      padding-left: 2px;

    }

padding

Used to set the various padding property in a single rule. The first value to the top, the second value to the right, the third value for the bottom, and the last value on the left.

Example

footer{

      padding: 2px 5px 2px 5px;

    }

   

If you used one value, the top, the right, the bottom, and the left value are the same.

Example

 header

    {

      padding: 5px;

    }

 

Outline: This property sets the outline encompassing an element (after the border, but before the margin. 

Properties

Description

outline-width

Set the width of the outline. Outline widths can be defined as a specific width, percentage, and pixels or by using pre-defined values, thin, medium, or thick.

outline-color

Set the color of the outline. The color can be set by:

  • name -specify a color name, for example, "black"
  • RGB - specify a RGB value , example "RGB(10,20,30)"
  • Hex - specify a Hex value , example "#fff"

outline-style

Set the style for the outline.

  • none: No border is drawn.
  • dotted: The border is a dotted line.
  • dashed: The border is a dashed line
  • solid: The border is a solid line.
  • double: The border is a double line
  • groove: The border is a 3-dimensioned groove drawn using color defined in the border
  • inset: The border is a 3-dimensioned inset drawn using color defined in the border
  • outset: The border is a 3-dimensioned outset drawn using color defined in the border.

min-height

Used to set the minimum height of the element.

Example

#header {

      min-height: 200px;

    }

max-width

Used to set the max height of the element.

Example

#header {

      max-height: 300px;

    }

 min-width

Used to set the min-width of the element.

Example

#header {

      min-width: 200px;

    }

max-width

Used to set the max width of the element.

Example

#header {

      max-height: 500px;

    } 

overflow

Used to specify what happens if the content overflows an element's box.

  • visible: The overflow is not clipped, it renders outside-the-box elements by default visible.
  • hidden: The overflow is clipped, and the rest of the content will be invisible.

Example #navbar-nav{overflow: hidden;}

  • scroll: The overflow is clipped, but the scroll bar is added to see the rest of the content.

Example #sidebar {overflow: scroll;}

  • auto: The overflow is clipped, and a scroll bar is added to see the rest of the content.

Example #header {overflow: auto;}

  • inherit Specifies that the value of the overflow property should be inherited from the parent element.

Example    #footer{ overflow: inherit;}

 

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

The total width of the element in the example below is 400px:

width:320px;

padding:10px;

border:10px solid black;

margin:20px;

Maths calculate:

320px width + 20px padding(left and right padding) + 20px border(left and right border) +  40px margin(left and right margin) =400px


 

Previous
Next
Leave a comment
No Cmomments yet