Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style paddingTop Property
The paddingTop property of DOM is used to set the top padding of an element in HTML. Remember, inserts the space within the border of an element. It is also used to return the top padding. The default value is 0.
Syntax
Following is the syntax −
- Syntax to return the top padding
object.style.paddingTop
- Syntax to set the top padding
object.style.paddingTop = "%|length|initial|inherit"
Here, % is the top padding, length is the top padding in length (units), initial is used to set the property to the default value and inherit is used to inherit property form parent element.
Example
Let us now see an example to implement the paddingTop property −
<!DOCTYPE html>
<html>
<head>
<style>
#sample {
border: 2px dashed #ded575;
}
</style>
</head>
<body>
<div id="sample">Demo text!</div>
<br>
<button type="button" onclick="demo()">Update</button>
<script>
function demo() {
document.getElementById("sample").style.paddingTop = "80px";
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the Update button above, the following would be visible. We have set the top padding now easily using the padding-top property −
Updated on: 17-Sep-2019
34 Views
Advertisements