The padding-top property specifies the top padding of an element. the padding properties define the space between the border and content.
The syntax to set the padding-top property is :
The syntax to set the padding-top property is :
padding-top:value;
Now create a Web page, named paddingtop.html which is used to display the padding property.
<!doctype html>
<head>
<title>padding-top property</title>
<style type="text/css">
p
{
border:double #FGF000;
background-color:#00FF00;
}
</style>
<script type="text/javascript">
function changepadding()
{
documentgetElementById("p1").style.paddingTop="5cm";
}
</script>
</head>
<body>
<p id="p1">Paragraph with top padding 5 cm</p>
<input type="button" onclick="changePadding()" value="top padding">
</body>
</html>
Here, the changePadding() function is created to convert the padding top style of an element. This function is assigned to a button which is labeled as top padding. The click event of the top padding button shows the content of the P element with the top padding of 5 centimeter(cm).
The Output is:
When click on top padding button then output is:
No comments:
Post a Comment