How to set the top border distance of css images-CSS Tutorial-php.cn

How to set the top border distance of css images

青灯夜游

Release： 2023-01-04 09:34:31

Original

4484 people have browsed it

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.

How to set the top border distance of css images

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>

Copy after login

Rendering:

How to set the top border distance of css images

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!