Header Ads Widget

Difference between CSS properties & it’s values.

My codding spot August 28, 2021

There are some properties in CSS that effect looks similar but in reality they are different from each other. 

This post will describes about such types of CSS properties and some values of the properties. 

First, we will discuss about both property after that specify the difference between them. 

(1) border vs. outline

• border 

 The border property applies border to an html elements. 

Syntax:- 

(Shorthand property) 

border: [border-width] [border-style] [border-color];

A border-width  specify width of border. 

A border-style  specify different styles for borders.

 Following are there:

none:- no border. 

solid:- single line (➖)  solid border. 

dotted:- series of dots (….). 

dashed:- series of short (---) lines. 

double:- two solid lines. 

groove:- border looks like it is carved into the page. 

ridge:- opposite to groove. 

inset:- border looks like it is embedded in page. 

outset:- border looks like it is coming out of canvas. 

hidden:- same as none. 

A border-color specify color of the border. 

Note: 

border is a shorthand property. You can individually change border (top, left, right and bottom)sides by adding top, left, right and bottom to width, style and color property. Like (border-top-width, border-left-style, border-right-color) 

Example:-

<div> element have blue dashed border with 15 pixel width. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
<head>
<title>border</title>
<style>
.borderex{
height:300px;
width:300px;
background-color:#ff0000;
border:15px dashed #0000ff;}
</style>
</head>
<body>
<div class="borderex"></div>
</body>
</html>

Output:-
Border property
Border property 

• outline

The outline property adds outline outside an element. 

Syntax

outline: [outline-width] [outline-style] [outline color];

outline-width is used to set width of outline. 

outline-style sets different styles for outline. 

(Styles for outline are similar to border styles as mention above) 

outline-color sets color of an outline. 

Example

<div> element with black dashed outline with 15 pixels. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<html>
<head>
<title>Outline</title>
<style>
.outlnex{
margin:50px;
height:300px;
width:300px;
background-color:#ffcccc;
outline:15px dashed #000000;}
</style>
</head>
<body>
<div class="outlnex"></div>
</body>
</html>

Output:-
Outline property
Outline property 

Difference between border and outline properties. 

1) An outline does not take up space of an element. While border generates on element and covers it's sides.

 To see the difference between border and outline look at the above both outputs. 

To understand clearly here’s another example. 


Below example specifies both properties on single element. 

Example
A div element with dashed green 10px border and dotted slateblue 10px outline. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
<head>
<title>border and outline</title>
<style>
.bordroutln{
margin:50px;
height:300px;
width:300px;
background-color:#f00;
border:10px dashed green;
outline:10px dotted slateblue;}
</style>
</head>
<body>
<div class="bordroutln"></div>
</body>
</html>

Output:-
Border and Outline togather
Border and Outline 

2) Outline is always same on all side of an element. There is no property for that. 

You can specify different styles, colors and width for sides of an element. 

Example

Following example  specify different styles, colors and width of borders. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<title>multiple border styles</title>
<style>
.multi{
margin:50px;
height:300px;
width:300px;
background-color:violet;
border-top-width:10px;
border-top-color:red;
border-top-style:solid;
border-bottom-width:15px;
border-bottom-color:magenta;
border-bottom-style:dotted;
border-left-width:5px;
border-left-color:grey;
border-left-style:dashed;
border-right-width:10px;
border-right-color:blue;
border-right-style:double;}
</style>
</head>
<body>
<div class="multi"></div>
</body>
</html>

Output:-
Multiple border styles
Multiple border styles

Following example specify outline of <p> element.

1
2
3
4
5
6
7
8
<html>
<head>
<title>Outline with individual properties</title>
</head>
<body>
<p style="outline-width:5px; outline-style:inset; outline-color:#f00;">I am outline example.</p>
</body>
</html>

Output:-
Outline on <p> element
Outline on <p> element

(2) padding vs. margin

• padding

The padding property adds space between element’s content and element's border. 

Four padding properties are used to set padding of four sides of element. 

Syntax

(These are individual properties )

padding-top: (values in length or percentage );
padding-right: (values in length or percentage );
padding-bottom: (values in length or percentage );
padding-left: (values in length or percentage );

You can specify all these values in shorthand property.
padding: (top) (right) (bottom) (left);

Note: Negative is not allowed.
If you specify only single value then it will applied to all sides of an element.

Example

Following example shows text in <h1> element with 0 padding and 10px padding.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
<head>
<title>Padding</title>
<style>
h1{padding:0px;
background-color:#f00;}
</style>
</head>
<body>
<h1>Padding is 0px.</h1>
</body>
</html>

Output:-
Padding:0px;
padding:0px;

h1{padding:10px
background-color:#f00;}

Output:-

padding:10px;
padding:10px;

• margin

The margin property adds space around the element.

Syntax

(Individual properties)

margin-top: (auto or length or percentage);
margin-right: (auto or length or percentage);
margin-bottom: (auto or length or percentage);
margin-left: (auto or length or percentage);

Shorthand property 

margin: (top) (bottom) (right) (left);
 
Example

Following example shows <p> element without margin and margin with 50px;


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html>
<head>
<title>Margin</title>
<style>
p{
margin:50px;
background-color:#cc0;}
</style>
</head>
<body>
<p>margin is 50px.</p>
</body>
</html>

Output:-
margin:50px;
margin:50px;
p{
margin:0px;
background-color:#cc0;}

Output:-
margin:0px;
margin:0px;

Difference between padding and margin properties.

1) Padding property adds space inside an element. Margin property adds space outside an element.

2) negative values not worked in padding property.
Margin property accepts negative values.

Following example shows <div> element with -100px.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
<head>
<title>Margin</title>
<style>
.negative{
height:200px;
width:200px;
background-color:#00f;
margin-left:-100px;}
</style>
</head>
<body>
<div class="negative"></div>
</body>
</html>

Output:-
Negative margin
Negative margin 

3) Padding property increase the size of an element.
Margin property not affects the size of an element.

Following example shows that total size of <h1> element is 100(height)+200(width)+80(20px padding of all sides)=380px.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
<head>
<title>Padding</title>
<style>
h1{padding:20px;
background-color:#f00;
height:100px;
width:200px;}
</style>
</head>
<body>
<h1>Padding is 20px.</h1>
</body>
</html>

Output:-
Padding property increase size of element
Padding property (increased size of<h1>)

The position property

position property sets position of an element top, bottom, right and left. The property has 4 values: static, fixed, absolute, relative.

Note:
Properties like top, bottom, right, left are used with this position property.

1) position: static

The static position is default position of an element. When position set to static element can’t moved from it’s normal in position.

Example
For boxes box1, box2, box3, box4 with position static. No impact of top and left properties on box1 and box2.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<title>Position property</title>
<style>
.b1{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#cca;
}
.b2{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#a20;
}
.b3{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#f00;
}
.b4{
position:static;
left:50px;
top:50px;
height:100px;
width:100px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="b1">box1</div>
<div class="b2">box2</div>
<div class="b3">box3</div>
<div class="b4">box4</div>
</body>
</html>

Output:-
position:static;
position:static;

2) position: fixed

The fixed position is used to fix an element at its position. 

Example
Last element box4 position is fixed.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<title>Position property</title>
<style>
.b1{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#cca;
}
.b2{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#a20;
}
.b3{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#f00;
}
.b4{
position:fixed;
left:50px;
height:100px;
width:100px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="b1">box1</div>
<div class="b2">box2</div>
<div class="b3">box3</div>
<div class="b4">box4</div>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
<p>some text.</p>
</body>
</html>

Output:-



3) position: relative

The relative position sets an element relative to it’s normal position. In general parent element’s position sets as relative.

Example
box2  element’s position is relative.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
<title>Position property</title>
<style>
.b1{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#cca;
}
.b2{
position:relative;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#a20;
}
.b3{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#f00;
}
.b4{
position:static;
left:50px;
height:100px;
width:100px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="b1">box1</div>
<div class="b2">box2</div>
<div class="b3">box3</div>
<div class="b4">box4</div>
</body>
</html>

Output:-
position:relative;
position:relative;

4) position: absolute

The absolute position sets element according to it’s parent element. If no parent element is present then it considers document body as parent.

Example
Box3 position sets as absolute.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
<title>Position property</title>
<style>
.b1{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#cca;
}
.b2{
position:static;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#a20;
}
.b3{
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:#f00;
}
.b4{
position:static;
left:50px;
height:100px;
width:100px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="b1">box1</div>
<div class="b2">box2</div>
<div class="b3">box3</div>
<div class="b4">box4</div>
</body>
</html>

Output:-
position:absolute;
position:absolute;
Example
Two elements with relative and absolute position.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<title>Position property</title>
<style>
.parent{
position:relative;
top:50px;
left:50px;
height:200px;
width:300px;
color:#fff;
background-color:#000;
}
.child{
position:absolute;
top:50px;
left:50px;
height:100px;
width:200px;
color:#000;
background-color:#fff;}
</style>
</head>
<body>
<div class="parent">position:relative
<div class="child">position:absolute</div>
</body>
</html>

Output:-
Absolute and Relative positions
Absolute and Relative positions 


Difference between absolute, relative, fixed and static  positions in CSS.

Difference between static position and fixed position

• You can set positions of an element to left, right, top and bottom when position set to fixed. 
With static position can’t set top, right, left, bottom properties.
• When you scroll the page, element with fixed position remain fixed at its position (not scroll like other element.). 
An element with static position scrolled while scrolling the page.

Difference between relative position and absolute position

• In relative position the blank area is not filled by other elements but in absolute position blank area is filled by other elements.

Difference between display: block vs. display:inline

The purpose of display property to control layout of elements.

By default the block- level elements are display as a block and inline elements are display as inline.
If you want to change the display of any element use display property.

display: inline;

  • When display property set to inline the elements take entire space on screen.
  • As it it needs entire space the elements are displayed in vertical line.

display: block;

  • When display property set to block elements takes only required space.
  • The elements are display in horizontal line.


Examples
Following two examples show you the difference between display: inline and display: block.

Example 1

display property set to inline.

<html>
<head>
<title>display property</title>
<style>
li{display:inline;
background-color:#aff;
}
span{
display:inline;
background-color:#fcc;}
.displ{
display:inline;
background-color:#fac;}
</style>
</head>
<body>
<h4>display:inline</h4>
<li>Red</li>
<li>Green</li>
<li>blue</li>
<h4>display:inline</h4>
<p class="displ">Hii Welcome.. to <span>my codding spot.</span></p>
</body>
</html>

Output:-


display: inline;
display: inline;
Example 2

display property set to block

<html>
<head>
<title>display property</title>
<style>
li{display:block;
background-color:#aff;
}
span{
display:block;
background-color:#fcc;}
.displ{
display:block;
background-color:#fac;}
</style>
</head>
<body>
<h4>display:block</h4>
<li>Red</li>
<li>Green</li>
<li>blue</li>
<h4>display:block</h4>
<p class="displ">Hii Welcome.. to <span>my codding spot.</span></p>
</body>
</html>

Output:-
display: block;
display: block;


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments