Comment définir la largeur de span en CSS-tutoriel CSS-php.cn

Comment définir la largeur de span en CSS

青灯夜游

Libérer： 2023-01-06 11:13:03

original

9735 Les gens l'ont consulté

Comment définir la largeur de span en CSS : utilisez d'abord le style "display:block;" ou "display:inline-block;" pour définir l'élément span sur un élément de bloc ou un élément de bloc en ligne ; Le style "width :Width value;" définit la largeur de la portée.

Comment définir la largeur de span en CSS

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

En HTML, span est un élément en ligne avec les caractéristiques suivantes :

1 Il est sur la même ligne que les autres éléments

2. top Et la marge inférieure ne peut pas être modifiée ;

3. La largeur est la largeur de son texte ou de son image et ne peut pas être modifiée.

On constate que la largeur et la hauteur de la travée sont généralement immuables. Mais parfois, nous devons définir la largeur de travée, que devons-nous faire ?

Solution :

Utilisez l'attribut display pour définir l'élément span sur un élément block ou un élément block en ligne, puis utilisez l'attribut width ; pour définir sa largeur.

Exemple :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			.inline{
				width: 150px;
				background-color: palevioletred;
			}
			.block{
				display: block;
				width: 150px;
				background-color: palevioletred;
			}
			.inline-block{
				display: inline-block;
				width: 150px;
				background-color: palevioletred;
			}

		</style>
	</head>

	<body>
		<div>测试文本，<span class="inline">测试文本</span>，<span class="block">测试文本</span>，<span class="inline-block">测试文本</span></div>
	</body>

</html>

Copier après la connexion

Rendu :

Comment définir la largeur de span en CSS

Description :

1. Les éléments de bloc

en HTML sont les éléments

display:block;

Syntaxe :

span{display:block;}

Copier après la connexion

Caractéristiques des éléments de niveau bloc :

1. Chaque élément de bloc commence sur une nouvelle ligne, et les éléments suivants commencent également sur une nouvelle ligne ( Occuper une ligne);

2. La hauteur, la largeur, la hauteur de la ligne et les marges supérieure et inférieure de l'élément peuvent être définies

3. l'élément ne peut pas être défini Dans ce cas, il occupe 100 % de son propre conteneur parent (la même largeur que l'élément parent

2. Éléments de bloc en ligne

) Les éléments de bloc en ligne (inline-block) ont les caractéristiques à la fois des éléments en ligne et des éléments de bloc. Le code display:inline-block définit l'élément sur un élément de bloc en ligne.

Syntaxe :