Maison  >  Article  >  interface Web  >  Que signifient les propriétés en ligne ?

Que signifient les propriétés en ligne ?

藏色散人
藏色散人original
2020-07-02 10:43:303406parcourir

L'attribut inline fait référence à l'attribut de style en ligne, et l'attribut style spécifie le style en ligne de l'élément, et comme l'élément en ligne a également un modèle de boîte, différents attributs CSS peuvent être définis pour l'élément en ligne, tels que la largeur, la hauteur, le rembourrage et les marges, etc.

Que signifient les propriétés en ligne ?

L'attribut style spécifie le style en ligne de l'élément

Paramètres de l'attribut d'élément en ligne

Les éléments en ligne ont également un modèle de boîte

Les éléments en ligne ont également un modèle de boîte, vous pouvez donc définir différents attributs CSS pour les éléments en ligne, tels que la largeur, la hauteur, le remplissage et les marges. , les éléments en ligne doivent-ils donc définir ces attributs ?

Définition de la largeur et de la hauteur des éléments en ligne

Il n'est pas valide de définir la largeur et la hauteur des éléments en ligne

.span1 {
    height: 200px;
    width: 200px;
}
 
<span class=&#39;span1&#39;>行内元素设置宽度和高度</span>

À l'heure actuelle, nous observez la page et la boîte À partir du modèle rendu, vous pouvez trouver :

Même si la largeur et la hauteur sont définies pour l'élément en ligne, la largeur et la hauteur spécifiques affichées par l'élément en ligne sont la largeur et la hauteur de l'élément en ligne. contenu lui-même, alors définissez la largeur et la hauteur de l'élément en ligne. High n'est pas valide

Le remplissage et la marge des paramètres d'élément en ligne

affecteront la gauche et la droite, mais pas le haut et le bas

Réglage des éléments en ligne, remplissage et marge, performances des valeurs spécifiques supérieures et inférieures

<span class=&#39;span2&#39;>行内元素设置边距上下属性</span><br>
 
.span2 {
    padding-top: 20px;
    padding-bottom: 30px;
    margin-top: 40px;
    margin-bottom: 50px;
}

À partir de l'image ci-dessus, nous pouvons constater que nous avons défini le padding-top, le padding-bottom, la marge-haut et la marge -bottom pour les éléments en ligne, mais ces attributs n'ont aucun effet spécifique. L'effet semble être Il a été ouvert, mais cela n'a pas affecté les autres éléments.

Définissez le remplissage et la marge pour les éléments en ligne. Les valeurs spécifiques​​pour l'affichage gauche et droit

auront un effet

<span class=&#39;span3&#39;>行内元素设置边距左右属性</span><br>
 
.span3 {
    padding-left: 100px;
    padding-right: 200px;
    margin-left: 300px;
    margin-right: 400px;
}

Comme le montre ce qui précède. image, si nous définissons padding-left, padding pour les éléments en ligne. Les attributs -right, margin-left, margin-right affecteront la position de l'élément dans la ligne

Pour plus de connaissances connexes, veuillez visiter le

Site Web PHP chinois !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Qu’est-ce que le front-end ?Article suivant:Qu’est-ce que le front-end ?