CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

Box model
 Borders & Outline
 Margin & Padding
 Height and width


CSS Borders:

Property

Description

border

Sets all the border properties in one declaration

border-width

Sets the width of the four borders

border-color

Sets the color of the four borders

border-style

Sets the style of the four borders. (Values are listed below)

border-left

Sets all the left border properties in one declaration

border-top

Sets all the top border properties in one declaration

border-right

Sets all the right border properties in one declaration

border-bottom

Sets all the bottom border properties in one declaration

border-bottom-color

Sets the color of the bottom border

border-bottom-style

Sets the style of the bottom border

border-bottom-width

Sets the width of the bottom border

border-left-color

Sets the color of the left border

The border-style Property:

groove: Border looks as though it is carved into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is embedded in the page.
outset: Border makes the box look like it is coming out of the canvas

The border-style property can have from one to four values.

 border-style: dotted solid double dashed;  top border is dotted  right border is solid  bottom border is double  left border is dashed  border-style: dotted solid double;  top border is dotted  right and left borders are solid  bottom border is double  border-style: dotted solid;  top and bottom borders are dotted  right and left borders are solid  border-style: dotted;  all four borders are dotted

Border Outline:
An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”.
 outline-color
 outline-style: Same values as border-style
 outline-width
 outline: <color> <style> <width>

CSS Margins:
The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.

Property

Description

margin

A shorthand property for setting the margin properties in one

margin-bottom

Sets the bottom margin of an element

margin-left

Sets the left margin of an element

margin-right

Sets the right margin of an element

margin-right

Sets the right margin of an element

margin-top

Sets the top margin of an element

Examples:

<p style=”margin: 15px; border:1px solid black;”>All four margins will be 15px </p>
<p style=”margin:10px 2%; border:1px solid black;”>Top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p>
<p style=”margin: 10px 2% -10px; border:1px solid black;”> Top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p>
<p style=”margin: 10px 2% -10px auto; border:1px solid black;”>Top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p>

CSS Padding:

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

Property

Description

padding-bottom

Sets the bottom padding of an element

padding-left

Sets the left padding of an element

padding-right

Sets the right padding of an element

padding-top

Sets the top padding of an element

Examples: <p style=”padding: 15px; border:1px solid black;”>All four padding will be 15px </p>
<p style=”padding:10px 2%; border:1px solid black;”> Top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document. </p>
<p style=”padding: 10px 2% 10px; border:1px solid black;”> Top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px </p>
<p style=”padding: 10px 2% 10px 10px; border:1px solid black;”>Top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px </p>

CSS Dimensions:

The CSS dimension properties allow you to control the height and width of an element.
 The height property is used to set the height of a box.
 The width property is used to set the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can be.
 The min-height property is used to set the minimum height that a box can be.
 The max-width property is used to set the maximum width that a box can be.
 The min-width property is used to set the minimum width that a box can be.

Leave a Reply