Comment modifier l'espacement entre les paragraphes de texte ?

Lors de l'utilisation de la balise

Des retraits sont automatiquement ajoutés en haut et en bas du paragraphe de texte. Ceci est fait afin de séparer visuellement un bloc de texte du suivant. Il est clair que les valeurs d'indentation par défaut ne sont pas toujours satisfaisantes, il faut donc parfois les diminuer ou les augmenter. Pour ce faire, vous pouvez utiliser la propriété universelle margin, elle définit les retraits de tous les côtés du paragraphe ou margin-top pour le retrait supérieur et margin-bottom pour le retrait inférieur.

La description

Définit la quantité de remplissage à partir du bord droit de l'élément. Le remplissage est la distance entre le bord extérieur de la bordure droite de l'élément actuel et la bordure intérieure de son élément parent (Figure 1).

Syntaxe

marge-droite : valeur | automatique | hériter

Les valeurs

La quantité de rembourrage droit peut être spécifiée en pixels (px), en pourcentage (%) ou dans d'autres unités acceptables pour CSS. La valeur peut être positive ou négative.

Auto Indique que la taille des retraits sera automatiquement calculée par le navigateur. inherit Hérite la valeur du parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

Le résultat de cet exemple est montré dans la Fig. 2.

Riz. 2. Application de la propriété margin-right

Modèle d'objet

document.getElementById ("elementID") .style.marginRight

Navigateurs

Internet Explorer 6 double la valeur de remplissage gauche ou droite pour les éléments flottants imbriqués dans les éléments parents. Le rembourrage qui est adjacent au côté du parent est doublé. Le problème est généralement résolu en ajoutant display: inline à l'élément flottant.

Internet Explorer jusqu'à la version 7.0 incluse ne prend pas en charge la valeur d'héritage.

Pour un plus bel affichage des éléments sur une page Web, des retraits externes et internes en CSS sont utilisés, et nous allons maintenant analyser cela avec des exemples.

Chaque élément, qu'il s'agisse d'un paragraphe, d'un div, d'une image ou d'une vidéo, est un bloc dans lequel vous pouvez indenter à la fois à l'intérieur avec la propriété padding et à l'extérieur avec la marge.

En css, ces propriétés sont écrites pour l'indentation de cette manière (par exemple, un paragraphe est pris) :

Au lieu de la balise P, vous écrivez bien entendu votre élément pour lequel l'indentation sera appliquée.

Il est impératif de comprendre et de se rappeler que pour les paramètres de marge et de remplissage, la construction des retraits pour chaque côté est la même.
C'est-à-dire que nous avons 4 valeurs dans chaque indentation :

Valeurs de retrait.

• Premier sens : tiret supérieur ;
• Deuxième sens : tiret vers la droite ;
• Troisième sens : marge inférieure ;
• Quatrième sens : retrait à gauche.

Dans cet exemple, j'ai fait une marge du rembourrage extérieur en css de cette manière: j'ai écrit 20px en haut, 10px à gauche et à droite (en règle générale, ils sont écrits de la même manière pour la symétrie), et en bas j'ai indiqué 30px.

Et pour le rembourrage du rembourrage intérieur, j'ai précisé : 10px en haut, à gauche et à droite, et 14px en bas.

La valeur du remplissage dans la marge et les propriétés de remplissage peuvent être réduites, à condition qu'elles soient de la même taille.
D'après mon exemple, la notation abrégée ressemblera déjà à ceci :

C'est-à-dire que lorsque la dernière entrée numérique est manquante, dans ce cas pour le retrait de gauche, le navigateur substitue automatiquement au retrait de gauche la même valeur que la valeur de droite.
Et dans mon cas, les retraits à droite et à gauche seront de 10px chacun, ce qui est en marge, ce qui est en remplissage.

Et si vous avez les mêmes valeurs pour les marges extérieures en haut et en bas (par exemple : 16px), et les mêmes valeurs pour les marges extérieures à gauche et à droite (par exemple : 20px), alors l'enregistrement aura une forme encore plus abrégée :

Par conséquent, pour l'indentation CSS intérieure, l'entrée est identique à celle-ci.

Application de tirets simples : pour chaque côté séparément.

Les propriétés à valeur unique suivantes s'appliquent pour spécifier une indentation distincte :

Propriétés de rembourrage pour chaque côté.

• marge supérieure : 3px ; rembourrage supérieur extérieur;
• marge gauche : 4px ; marge extérieure gauche ;
• marge droite : 6 px ; marge extérieure droite ;
• marge inférieure : 10 px ; rembourrage inférieur extérieur.

De la même manière, les entrées sont écrites pour les retraits internes, il vous suffit de remplacer la marge par un remplissage.

Par exemple, vous avez déjà tous les retraits en css pour toutes les images img.

C'est-à-dire (pour plus de clarté) que le rembourrage extérieur a les valeurs suivantes : 10 pixels supérieurs, gauche et droite : 20 pixels chacun et 14 pixels inférieurs.
Et le rembourrage est de 6px sur les 4 côtés.

Supposons que vous ayez décidé de mettre une autre image sur la page, mais que vous souhaitiez uniquement modifier la marge extérieure en haut et laisser le reste tel quel. Et pour accomplir cette tâche, il suffit d'écrire une classe pour cette image, et d'ajouter une entrée supplémentaire au css.

En conséquence, l'image que vous avez ajoutée avec la classe verx acceptera toute l'indentation spécifiée dans le css pour la balise img, et ne changera que la marge pour le côté supérieur (dans notre cas : 40px).

J'ai essayé de rendre la description de l'indentation CSS plus détaillée, mais si vous avez des questions, posez-les dans les commentaires.

Salut! Au départ, je voulais diviser cet article en 4 petits, mais ensuite j'y ai pensé. Pourquoi? Après tout, il est plus pratique de collecter de telles informations dans le cadre d'un seul matériau.

Par conséquent, aujourd'hui, nous allons apprendre à indenter CSS de la gauche et de tous les autres côtés - à droite, en haut et en bas. Ils peuvent être faits pour les images et les textes. Ils sont de deux types :

• Externe;
• Interne.

Pour le premier, la marge de propriété clé est utilisée, pour le second, le remplissage. Pour plus de clarté, je vous ai fait un petit exemple. Pour qu'il soit visuellement pratique de faire la distinction entre l'espace interne et externe, j'ai ajouté une table visible. Voyons ce qui se passe?

Rembourrage externe

En les enregistrant dans le fichier de style CSS, il sera possible de paramétrer l'orientation du bloc d'information sur la page. Par exemple, déplacez-le vers la gauche et vers le bas. Montrons immédiatement à quoi cela ressemblera.

En général, vous pouvez utiliser les options suivantes pour définir des retraits.

Gauche (marge-gauche).

Droite (marge-droite).

Haut (marge-haut).

Bas (marge-bas).

Maintenant, je vais vous montrer une autre nuance sympa.

Comme vous pouvez le voir, vous pouvez utiliser l'une des options - l'effet est le même. Ce n'est que dans le second cas que le code est plus compact. Notez également que le rembourrage est dans le sens des aiguilles d'une montre. Tout commence en haut et se termine à gauche.

Rembourrage interne

La procédure est similaire ici. Seulement maintenant, je vais ajouter de nouvelles propriétés non pas pour la table entière, mais pour le contenu des colonnes.

Voyons ce qu'il en est advenu.

Par analogie avec les marges intérieures en CSS, les marges extérieures peuvent être écrites en code abrégé ou pour les côtés séparément.

Ce furent les points saillants. Enfin, je vais vous montrer comment vous pouvez faciliter une partie du travail.

Indentation au niveau des balises sélectionnées

Dans les cas que nous avons examinés ci-dessus, ils sont définis pour le texte et les images en même temps. En fait, vous pouvez définir la distance aux éléments au niveau d'une balise spécifique. Je vais vous montrer comment ça marche. Annulez les dernières modifications et placez le code personnalisé dans la feuille de style.

Voyons ce qui s'est passé après avoir enregistré les modifications.

L'image est restée en place, seul le texte enfermé à gauche a bougé. Des manipulations similaires peuvent être appliquées à d'autres blocs, par exemple tr, span.

En complément d'information, je propose une publication sur la tâche à revoir. Des méthodes assez intéressantes y sont également décrites. Cela peut être utile pour former une ligne rouge dans le texte ou effectuer d'autres actions.

De plus, il existe un abonnement à la distribution gratuite d'informations aux adresses e-mail. Il existe un formulaire spécial pour s'abonner au blog. Jusqu'à la prochaine fois.

La propriété détermine l'espace de texte horizontal à envelopper avant le début de la première ligne de l'élément de texte. L'espacement est calculé à partir du début du bord de l'élément et du conteneur pour le niveau du bloc.

Étant donné que la plupart du contenu d'une page Web est présenté sous forme de texte, la capacité de styler ce texte à la fois attrayant et efficace est une compétence importante qui peut devenir un concepteur de sites Web. La méthode la plus couramment utilisée et recommandée pour indenter la description et le paragraphe consiste à utiliser CSS. Ici, vous recevrez divers exemples de la façon dont CSS peut être utilisé pour le texte et un élément d'indentation.

Définir la marge supérieure en CSS

Pour créer des marges supérieures, nous ne pouvons certainement pas nous passer des propriétés CSS, nous avons donc besoin de margin-top, cette valeur peut être définie de différentes manières, à la fois en px et en standard sur les pixels, em,% et ainsi de suite, que tout se passe dans la stylistique CSS en unités de mesure.

Exemple d'utilisation :

Bloc de marge (
marge supérieure : 50px ;
}

Ce que vous pouvez regarder l'image:

Vous pouvez également l'utiliser pour déposer des blocs, puis ici vous pouvez utiliser une propriété appelée marge-gauche aussi marge-droite et marge-bas... Là où nous indiquons simplement la propriété margin, où il est possible de définir initialement 4 paramètres pour elle, nous considérerons ici le sens des aiguilles d'une montre pour le concept, où nous commençons par le haut et continuons sous chaque côté.

marge : 20px 50px 30px 50px ;

A également un rembourrage sur le dessus en CSS

Il arrive que vous ayez besoin d'aligner un élément de contenu verticalement, ceci est relatif au bloc parent, ici il est possible d'utiliser d'autres propriétés, comme padding-top, qui fait, ou plutôt, par défaut, définit le padding vers le haut. Si nous parlons de propriétés similaires, qui peuvent également être écrites et définies par analogie, voici la marge en px, em,% et autres unités.

Exemple:

Bloc de remplissage (
rembourrage haut : 47px ;
}

On peut maintenant considérer un analogue de la propriété marge et rembourrage, qui est utilisé pour définir les retraits des autres côtés de l'élément de bloc, mais va déjà séparément : remplissage-gauche, rembourrage-droit, rembourrage-bas... Où vous pouvez définir immédiatement la distance dont vous avez besoin, uniquement pour tous les côtés, et tout sera en même temps.

rembourrage : 10px 20px 40px 50px ;

Ici, vous pouvez d'abord définir la valeur comme pour marge en commençant comme vous l'entendez d'en haut, mais ensuite tout va dans le sens des aiguilles d'une montre, c'est à droite, en bas, à gauche, et ainsi de suite.

Maintenant, selon la situation différente, vous avez la possibilité de faire des retraits au-dessus des styles CSS, où nous utilisons les propriétés marge et rembourrage qu'il est possible d'afficher les éléments nécessaires sur la page de votre ressource Internet, comme vous l'avez conçu et vous devez le faire.