Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!
We spend hours scrolling social media and waste money on things we forget, but won’t spend 30 minutes a day earning certifications that can change our lives.
Master in DevOps, SRE, DevSecOps & MLOps by DevOps School!
Learn from Guru Rajesh Kumar and double your salary in just one year.
Image
The styling of an image in CSS is similar to the styling of an element by using the borders and margins. There are multiple CSS properties such as border property, height property, width property, etc. that helps us to style an image.
example
<!DOCTYPE html>
<html>
<head>
<style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
}
h2{
color:red;
}
</style>
</head>
<body>
<h1> Image</h1>
<img src="jtp.png"></img>
<h2>images in html including css</h2>
</body>
</html> Padding
This property is used to define the space between the element content and the element border, Top, bottom, left and right padding can be changed independently using separate properties. You can also change all properties at once by using shorthand padding property.
Css padding properties
- padding = It is used to set all the padding properties in one declaration.
- padding-left = It is used to set left padding of an element.
- padding-right = It is used to set right padding of an element.
- padding-bottom = It is used to set top padding of an element.
- padding-up = It is used to set bottom padding of an element.
example
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html> 