CSS Box model

The CSS box model specifies the element frame handling element content elements, the inner margin padding, the border border, and the margin margin.

The width and height of the content area are expressed in widths and heights.

1) Inner margin padding

<!--   each edge of the H1 element is a 10-pixel inner margin  -- h1 {padding:10px;} <!--   set each edge   -to- H1 {padding:10px 0.25em 2ex 20%, respectively, in the lower-right-left order. <!-- The   following code is equivalent  to--- H1 {  padding-top:10px;  padding-right:0.25em;  Padding-bottom:2ex;  padding-left:20%;  }

2) Border border

The CSS border property allows you to specify the style, width, and color of the element's border.

The Border-style property defines the style of the border. The property values are: None,hidden,dotted,dashed,solid,double,

Groove,ridge,inset,outset,inherit.

The property value is none by default.

<!--   The following two ways are  equivalent -- p {border-style:solid solid solid none;} p {border-style:solid; border-left-style:none;}

The Border-width property specifies the width of the border. The attribute values can be: 2px, 0.1em, thin, medium, thick.

p {border-style:solid; border-width:5px;} <!--   You can set each edge border  of an element in Top-right-bottom-left order-- p {border-style:solid; Border-width: 15px 5px 15px 5px;} <!--   The above example can also be abbreviated as (this is called value copy  )--p {border-style:solid; border-width:15px 5px;} <!-- The   following rule is equivalent to the above example-  - p {  border-style:solid;  border-top-width:15px;  border-right-width:5px;  border-bottom-width:15px;  border-left-width:5px;  }

The Border-color property sets the border color. The property value can be a named color, or it can be a hexadecimal and an RGB value.

p {  border-style:solid;  Border-color:blue RGB (25%,35%,45%) #909090 red;  } <!-- Define single-   sided Colors   -- H1 {  border-style:solid;  Border-color:black;  border-right-color:red;  }

The following example shows if a transparent border is defined:

<!--CSS2 introduces the border color value transparent.  This value is used to create an invisible border with a width.  -<HTML><Head><styletype= "Text/css">A:link, a:visited{Border-style:Solid;Border-width:5px;Border-color:Transparent;  }a:hover{Border-color:Gray;}</style></Head><Body><ahref="#">Aaa</a><ahref="#">Bbb</a><ahref="#">Ccc</a></Body></HTML>

3) margin outer frame

The margin property accepts any length unit, which can be pixels, inches, millimeters, or EM.

<!--1/4-inch-wide white space on each edge of the H1 element -h1 {margin:0.25in;}<!--The four edges of the H1 element define different margins in the left-to-right order, with the length in pixels (px) -H1 {margin:10px 0px 15px 5px;}<!--You can also set a percentage value for margin, which is calculated relative to the width of the parent element . -H1 {margin:10px 0px 15px 5px;}<!--Sometimes, we enter some duplicate values. With value replication, you don't have to type this pair of numbers repeatedly.    CSS defines rules that allow for margins to be specified with less than 4 values.    If the value of the left margin is missing, the value of the right margin is used.    If the value of the margin is missing, the value of the top margin is used. If the value of the right margin is missing, the value of the top margin is used.  -p {margin:0.5em 1em;}

<!-- You can use the unilateral margin property to set the value for the margin on the element's side. Multiple such unilateral attributes can be used in a rule. The following two cases are equivalent --p {margin:20px 30px 30px 20px;} p {  margin-top:20px;  margin-right:30px;  margin-bottom:30px;  margin-left:20px;  }

Margin merging is a fairly simple concept, meaning that when two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

CSS Box model