In CSS, you can use the padding-top attribute to set the top border distance of the image. You only need to add the "padding-top: distance value;" style to the image element. The padding-top attribute can set the top padding (space) of the element, and negative values are not allowed.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css picture setting top border distance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img{
border: 1px solid red;
padding-top: 20px;
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%"/ alt="How to set the top border distance of css images" ><br>
</body>
</html>Rendering:
css padding-top attribute
The padding-top attribute sets the top padding (space) of the element.
Description
This attribute sets the width of the padding on the element. Top padding set on inline, non-replaced elements does not affect line height calculations, so if an element has both padding and background, it may visually extend to other lines and possibly overlap other content. . Negative padding values are not allowed. (Learning video sharing: css video tutorial)
Note: Negative values are not allowed.
Attribute value:
| Value | Description |
|---|---|
| length | Specifies a fixed top padding value in specific units, such as pixels, centimeters, etc. The default value is 0px. |
| % | Defines top padding as a percentage based on the width of the parent element. This value will not work as expected in all browsers. |
For more programming related knowledge, please visit: Programming Video! !
The above is the detailed content of How to set the top border distance of css images. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
