CSS/HTML Padding Top,Bottom,Left,Right Code For Website - Learn About Website | DaddyFile

0

Padding Top,Bottom,Left,Right Explain

Left Padding:

Html Code:

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
    padding-left: 2cm;
}
p.padding2 {
    padding-left: 50%;
}
</style>
</head>
<body>

<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>

</body>
</html>

Html Code Result:

This is a text with no left padding.
This text has a left padding of 2 cm.
This text has a left padding of 50%.



Right Padding:

Html Code:

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
    padding-right: 2cm;
}

p.padding2 {
    padding-right: 50%;
}
</style>
</head>
<body>

<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>

</body>
</html>


Html Code Result:

This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.
This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.
This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.


Top Padding:

Html Code:

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
    padding-top: 2cm;
}

p.padding2 {
    padding-top: 50%;
}
</style>
</head>
<body>

<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>

</body>
</html>


Html Code Result:

This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.
This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.
This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.


Bottom Padding:

Html Code:

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
    padding-bottom:2cm;
}

p.padding2 {
    padding-bottom:50%;
}
</style>
</head>
<body>

<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>

</body>
</html>




Html Code Result:

This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.
This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.
This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.

Post a Comment

 
Top