@coder 758
PADDING PROPERTY
2021-11-16 14:18 · 4 min read
It is used to give some space around the elements. There are some properties for padding i.e. padding-left, padding-top, padding-bottom, and padding-right.
CSS3 Padding
You can use the padding property if you want some horizontal and vertical space from all directions.
{padding-left : 20px;}
property value
Example
Here is a simple example of padding property
when applying padding property on a <p> tag.
When we run the code, we can see that the paragraph tag has a padding of 50px from the left direction.
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<p type="submit" style="padding-left:50px;color:white;background-color:black;">
TDB Tutorials
</p>
</body>
</html>
CSS3 Padding Property
- padding:10px
- padding-top:20px
- padding-right:20px
- padding-bottom:20px
- padding-left:20px
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-school{color:rgb(255,255,255);background-color:rgb(0,0,0);
padding:10px 35px 10px 35px;border:none;border-radius:5px}
.top{padding-top:50px}
.right{padding-right:50px}
.bottom{padding-bottom:50px}
.left{padding-left:50px}
</style>
</head>
<!--Body-->
<body>
<button type="submit" class="tdb-school padding">Padding</button><br><br>
<button type="submit" class="tdb-school top">Padding</button><br><br>
<button type="submit" class="tdb-school right">Padding</button><br><br>
<button type="submit" class="tdb-school bottom">Padding</button><br><br>
<button type="submit" class="tdb-school left">Padding</button>
</body>
</html>
Padding Short-hand
CSS3 padding property specifies a shorthand property (all padding properties in one declaration)
{padding : 10px 10px 10px 10px;}
property top right bottom left
- padding:10px 10px 10px 10px
- padding:10px 20px 30px 40px
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-school{
color:rgb(255,255,255);
background-color:rgb(0,0,0);
padding:50px 50px 50px 50px;
border:none;
border-radius:5px
}
</style>
</head>
<!--Body-->
<body>
<button type="submit" class="tdb-school padding">
Padding
</button><br><br>
</body>
</html>
TAGS:
POPULAR POSTS
what is new in miui 11?...
best free web hosting services...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
CSS3 RESPONSIVE UI...
Tables HTML...
How to host a web page in 10 minutes....
How to use CSS3 Overflow Property?...
CSS3 FUNCTIONS...
CSS3 FILTERS...
CSS3 SHAPES...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
