The padding-right property set the padding to the right of an element. In the right padding a space is added between the content of the element and the right border. The syntax to set the padding-right property is:
<!doctype html>
<head>
<title>padding-right property</title>
<style type="text/css">
p
{
border:double #FF0000;
background-color:#00FF00;
}
</style>
<SCRIPT type="text/javascript">
function rightPadding()
{
document.getElementById("p1").style.paddingRight="20cm";
}
</SCRIPT>
</head>
<body>
<p id="p1">This document for right padding </p>
<input type="button" onclick="rightPadding()" value="Right padding">
</body>
</html>
The rightpadding() function is created to convert the padding right style of an element. This function is assigned to a button which is labeled as RIGHT PADDING. The click event of Right padding button shows the content of the p element with the right padding og 20cm.
The Output is:
padding-right:value;
Create a Web page named paddingright.html
<head>
<title>padding-right property</title>
<style type="text/css">
p
{
border:double #FF0000;
background-color:#00FF00;
}
</style>
<SCRIPT type="text/javascript">
function rightPadding()
{
document.getElementById("p1").style.paddingRight="20cm";
}
</SCRIPT>
</head>
<body>
<p id="p1">This document for right padding </p>
<input type="button" onclick="rightPadding()" value="Right padding">
</body>
</html>
The rightpadding() function is created to convert the padding right style of an element. This function is assigned to a button which is labeled as RIGHT PADDING. The click event of Right padding button shows the content of the p element with the right padding og 20cm.
The Output is:
Click on Right padding button to show the effect of the padding-right property.
No comments:
Post a Comment