CSS Box Model Tutorial

This Post Important for those who want to fully know about CSS (Cascading Style Sheet) in
Web Development Field After HTML You should be learned and get knowledge about CSS for styling to improve and attractive website,

What is CSS Box Model?

In HTML all Elements Considered as like "box" so in CSS  Box Model is fully about website
Layout and Website Design this is very short description about CSS Box Model,

Following Steps in CSS Box Model,  there are three edges in CSS

border edge
Margin edge, 
Padding edge

if you are very beginner in Web Design Field you can Read these following post.

Difference Between HTML And HTML5
Webforms  in HTML
Basic Elements and tags
Formatting Tags
List in HTML
Tables in HTML



Css Box Model

CSS Border 

The border box properties allow you to specify how the border of the box representing an element
should look. There are three properties of a border you can change.

The border color Specifies the color of a border. 

The border style Specifies whether a border should be solid, dashed line, double line, or one of the other possible values.

The border width Specifies the width of a border. 



CSS Box Model


==============

CSS Border Code

==============

<style type="text/css"> 
p.example1{ 
border:1px solid; 
border-bottom-color:#009900; /* Green */ 
border-top-color:#FF0000; /* Red */ 
border-left-color:#330000; /* Black */ 
border-right-color:#0000CC; /* Blue */ 

p.example2{ 
border:1px solid; 
border-color:#009900; /* Green */ 

</style> 
<p class="example1"> This example is showing all borders in different colors. </p> 
<p class="example2"> This example is showing all borders in green color only. </p>

======================================================================

Border Style 

The border style property allows you to select one of the following styles of border:

1.none: No border. (Equivalent of border-width:0;) 

2.solid: Border is a single solid line. 

3.dotted: Border is a series of dots. 

4.dashed: Border is a series of short lines. 

5.double: Border is two solid lines. 

6.groove: Border looks as though it is carved into the page. 

7.ridge: Border looks the opposite of groove. 

8.inset: Border makes the box look like it is embedded in the page. 

9.outset: Border makes the box look like it is coming out of the canvas. 

10.hidden: Defines a hidden border.

You can individually change the style of the bottom, left, top, and right borders of an element using 
following properties: 

border-bottom-style changes the style of bottom border.
border-top-style changes the style of top border. 
border-left-style changes the style of left border. 
border-right-style changes the style of right border.



<p style="border-width:4px; border-style:none;"> This is a border with none width. </p>
<p style="border-width:4px; border-style:solid;"> This is a solid border. </p>
<p style="border-width:4px; border-style:dashed;"> This is a dahsed border. </p>


BORDER PROPERTIES USING SHORTHAND

The border property allows you to specify color, style, and width of lines in one property: You can 
use all the three properties into a single property.

This is the most frequently used property to set a border around any element. 

<p style="border:4px solid red;"> This example is showing shorthand property for border. </p>

=======================================================================

CSS Margin 


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

values of the margin property are not inherited by child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal. 

There are following four properties to set an element margin. 

The margin A shorthand property for setting the margin properties in one declaration. 
The margin-bottom Specifies the bottom margin of an element. 
The margin-top Specifies the top margin of an element. 
The margin-left Specifies the left margin of an element. 
The margin-right Specifies the right margin of an element.

MARGIN PROPERTY

The margin property allows you set all of the properties for the four margins in one declaration. Here
is the syntax to set margin around a paragraph:

<style type="text/css"> p {margin: 15px} all four margins will be 15px 

p {margin: 10px 2%} 

top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. 

p {margin: 10px 2% -10px} 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 {margin: 10px 2% -10px auto} 

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

MARGIN-BOTTOM PROPERTY 

The margin-bottom property allows you set bottom margin of an element. It can have a value in length, % or auto.

<p style="margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>

MARGIN-TOP PROPERTY 


<p style="margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>

MARGIN-LEFT PROPERTY  

The margin-left property allows you set left margin of an element. It can have a value in length, % or auto.

<p style="margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>

MARGIN-RIGHT PROPERTY 

<p style="margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>

======================================================================


CSS Paddings


The padding property allows you to specify how much space should appear between the content of
an element and its border: 

There are following five CSS properties which can be used to control lists: 

The value of this attribute should be either a length, a percentage, or the word inherit. If the value is 

inherit it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

You can also set different values for the padding on each side of the box using the following 
properties:

CSS Selectors 
The padding-bottom Specifies the bottom padding of an element. 
The padding-top Specifies the top padding of an element. 
The padding-left Specifies the left padding of an element.
The padding-right Specifies the right padding of an element. 
The padding Serves as shorthand for the preceding properties.


PADDING-BOTTON PROPERTY

The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.

<p style="padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>

PADDING-TOP PROPERTY


<p style="padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>PADDING-LEFT PROPERTY

The padding-left property sets the left padding (space) of an element. This can take a value in terms 
of the length of %.

<p style="padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>

PADDING-RIGHT PROPERTY

<p style="padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>

PADDING PROPERTY

The padding property sets the left, right, top and bottom padding (space) of an element. This can take 
a value in terms of length of %.


<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>


COMMENTS

Name

Blogging,9,How to,24,Make Money,10,SEO,16,Tricks & Tips,1,Web Designing,11,Web Development,8,
ltr
item
Weblog Tricks - Learn Everything About Web : CSS Box Model Tutorial
CSS Box Model Tutorial
CSS Box Model Tutorials step by step examples, tricks, and also provide border box sizing code and elements tags of html
https://1.bp.blogspot.com/-nbNVp-PQTSg/WMzz88vOKhI/AAAAAAAAAWI/Zsw08fDrYs4ajESTYj3BW-1pDPMTtP0CgCLcB/s640/3D-Colorful-Squares-Wallpapers.jpg
https://1.bp.blogspot.com/-nbNVp-PQTSg/WMzz88vOKhI/AAAAAAAAAWI/Zsw08fDrYs4ajESTYj3BW-1pDPMTtP0CgCLcB/s72-c/3D-Colorful-Squares-Wallpapers.jpg
Weblog Tricks - Learn Everything About Web
http://www.weblogtricks.com/2017/03/css-box-model-tutorial.html
http://www.weblogtricks.com/
http://www.weblogtricks.com/
http://www.weblogtricks.com/2017/03/css-box-model-tutorial.html
true
3158682668530211189
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy