Comment définir la distance de la bordure supérieure des images CSS-tutoriel CSS-php.cn

Comment définir la distance de la bordure supérieure des images CSS

青灯夜游

Libérer： 2023-01-04 09:34:31

original

4576 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut padding-top pour définir la distance de la bordure supérieure de l'image. Il vous suffit d'ajouter le style "padding-top: distance value;" à l'élément d'image. L'attribut padding-top peut définir le remplissage supérieur (espace) de l'élément, et les valeurs négatives ne sont pas autorisées.

Comment définir la distance de la bordure supérieure des images CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

paramètre d'image CSS distance de la bordure supérieure

<!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="Comment définir la distance de la bordure supérieure des images CSS" ><br>
	</body>

</html>

Copier après la connexion

Rendu :

Comment définir la distance de la bordure supérieure des images CSS

remplissage CSS Attribut -top

L'attribut padding-top définit le remplissage supérieur (espace) de l'élément.

Description

Cet attribut définit la largeur du remplissage sur l'élément. Le remplissage supérieur défini sur les éléments en ligne non remplacés n'affecte pas les calculs de hauteur de ligne, donc si un élément a à la fois un remplissage et un arrière-plan, il peut s'étendre visuellement à d'autres lignes et éventuellement chevaucher d'autres contenus. Les valeurs de remplissage négatives ne sont pas autorisées. (Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Remarque : Les valeurs négatives ne sont pas autorisées.

Valeur de l'attribut :

值	描述
length	规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有的浏览器中。

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!