La balise ajoute un remplissage en haut au centre. Modifier le remplissage et l'espacement supérieur en CSS

Bonjour! Au départ je voulais diviser cet article en 4 petits, mais ensuite j'y ai réfléchi. Pour quoi? Après tout, il est plus pratique que ces informations soient collectées dans un seul matériau.

Alors aujourd'hui, nous allons apprendre à faire Indentation CSSà gauche et de tous les autres côtés - à droite, en haut et en bas. Ils peuvent être réalisés pour des images et des textes. Ils sont de deux types :

• Externe;
• Interne.

Pour le premier, la propriété clé est la marge, pour le second, le remplissage. Pour plus de clarté, j'ai fait un petit exemple pour vous. Pour faciliter visuellement la distinction entre l'espace interne et externe, j'ai ajouté un tableau visible. Voyons ce qui s'est passé ?

Marges

En les écrivant dans un fichier de style CSS, vous pouvez définir l'orientation du bloc d'informations sur la page. Par exemple, je vais le déplacer vers la gauche et le bas. Permettez-moi de vous montrer immédiatement à quoi cela ressemblera.

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

Gauche (marge gauche).

A droite (marge à droite).

Haut (marge en haut).

Bas (marge-bas).

Maintenant, je vais vous montrer une autre nuance intéressante.

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 s'avère plus compact. Notez également que les retraits sont définis dans le sens des aiguilles d'une montre. Tout commence en haut et se termine à gauche.

Rembourrage

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 internes en CSS, les marges externes peuvent être écrites en code raccourci ou pour les côtés séparément.

Tels étaient les points principaux. Enfin, je vais vous montrer comment vous pouvez faciliter certains travaux.

Indentation au niveau de la balise sélectionnée

Dans les cas vus ci-dessus, ils sont définis simultanément pour le texte et les images. 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. J'annule les dernières modifications et précise le code spécial dans le fichier de style.

Jetons un coup d'œil à ce qui s'est passé après l'enregistrement des modifications.

L'image est restée en place, seul le texte encadré s'est déplacé vers la gauche. Des manipulations similaires peuvent être appliquées à d'autres blocs, par exemple tr, span.

Comme Informations Complémentaires Je vous suggère de lire la publication sur la tâche. Il y a aussi suffisamment décrit façons intéressantes. Peut être utile pour former une ligne rouge dans le texte ou effectuer d’autres actions.

De plus, vous pouvez vous abonner à une newsletter gratuite sur adresses e-mail. Il existe un formulaire spécial pour s'abonner au blog. À plus tard.

Une ressource Web est évaluée par les utilisateurs en fonction de son attrait visuel. Par conséquent, même un texte utile sur le plan informationnel peut ne pas être lu en raison du fait qu’il est mal conçu. Conclusion - vous devez aborder avec soin et attention non seulement le contenu sémantique des pages du site, mais également sa présentation visuelle. L'avènement de la technologie CSS a élargi les possibilités de création d'articles attrayants. L'une des propriétés conçues pour rendre l'écriture plus facile à lire est l'indentation du texte CSS.

Marges et remplissage : quelle est la différence ?

Avant de commencer à formater du texte, vous devez comprendre ce que sont les marges et les retraits. Malgré le fait que ces éléments de balisage se ressemblent dans certains cas pour l'utilisateur, il existe des différences fondamentales entre eux :

• le champ est spécifié par la propriété rembourrage, retrait - marge;
• la marge est déterminée par l'écart entre le contenu et la bordure du bloc, le retrait - entre les bordures des blocs adjacents ;
• les marges peuvent ou non être prises en compte dans les dimensions de l’élément (largeur et hauteur).

propriété de marge

Ainsi, pour définir l'indentation horizontale ou verticale du texte CSS, utilisez la construction marge. Cette propriété s'applique à la balise définir le paragraphe du document. Dans le très cas simple il s'écrit ainsi :

marge : 12px.

Cette ligne signifie qu'autour du bloc de texte (ou de tout autre bloc) il y aura une indentation de 12 pixels de tous les côtés. Pour augmenter l'intervalle, par exemple, trois fois, écrivez simplement :

marge : 36px.

Mais que se passerait-il si l’intervalle entre les blocs devait être différent de chaque côté ? Les développeurs de pages Web utilisent plusieurs formes d'enregistrement :

1. marge : 11px 22px.
2. marge : 11px 22px 33px.
3. marge : 11px 22px 33px 44px.

Dans le premier exemple, 11 pixels seront en retrait des bordures inférieure et supérieure du bloc, et 22 pixels sur les côtés du bloc. Selon la deuxième forme d'enregistrement, il y aura 11 pixels entre le bord supérieur du bloc et le contenu, 33 pixels entre le bas et 22 pixels sur les côtés. Dans le troisième cas, le padding sera de 11 pixels en haut, 22 pixels à droite, 33 pixels en bas et 44 pixels à gauche.

Il est également possible d'enregistrer la distance jusqu'à la limite du bloc sur un seul côté : marge en haut, marge en bas, marge à gauche, marge à droite. En traduisant les noms des propriétés en russe, il est facile de deviner leur destination. Par exemple, l'entrée suivante indique que la marge droite sera de 22 pixels :

marge droite : 22 px.

Pour les autres côtés, les distances autour du bloc sont supposées égales à la valeur de l'élément parent.

Propriété marge possède une fonctionnalité qu'un développeur doit garder à l'esprit lors de l'utilisation de l'indentation verticale du texte CSS. Intervalles éléments voisins ne sont pas résumés, mais superposés les uns aux autres. Par exemple, supposons qu'un des blocs ait marge inférieure : 15 px, et le bloc adjacent en dessous marge supérieure : 35 px. L'arithmétique scolaire et le bon sens suggèrent que l'espace total entre eux sera de 50 pixels. En pratique, ce n'est pas le cas. Bloc à forte valeur foncière marge va « absorber » son voisin. En conséquence, l'espacement entre les éléments sera de 35 pixels.

Ligne "rouge"

Rédaction d'un document en éditeur de texte, les utilisateurs préfèrent préciser chaque nouveau paragraphe à l’aide d’une ligne « rouge ». AVEC en utilisant CSS l'indentation du texte à gauche est facile à faire - la construction est utilisée retrait de texte. C'est écrit ainsi :

retrait du texte : 11 px.

Autrement dit, la première ligne du paragraphe sera décalée de 11 pixels par rapport au bord gauche. Pour que le texte d'une page Web ressemble davantage à un document dans l'éditeur, vous devez en outre définir, c'est-à-dire écrire :

retrait du texte : 11 px ;

text-align : justifier.

En plus des pixels, lors de la description des marquages, il est permis d'utiliser d'autres unités - pouces, points, pourcentages. Laissez le bloc avoir un remplissage de texte CSS de 10 %. Avec une largeur de bloc de 500 pixels, la ligne rouge fera 50 pixels (10 % de 500).

Cette propriété peut être définie sur hériter. Cette entrée indique que le bloc utilise une propriété similaire du bloc parent.

text-indent : hériter.

Étonnamment, il peut aussi prendre des valeurs négatives ! Dans ce cas, des surplombs se forment, c'est-à-dire que le texte principal reste en place et la première ligne est décalée vers la gauche de 22 pixels :

retrait du texte : -22px.

Pour éviter que les lettres ne dépassent le bord gauche du navigateur, en plus de retrait de texte vous devez utiliser la construction pour définir le champ :

padding-left : 22px.

Les principales propriétés du CSS sont passées en revue. Et la pratique aidera à les consolider. Voici quelques derniers conseils pour appliquer ce que vous avez appris au développement de votre site Web :

• la ligne rouge et l'indentation du texte sont des concepts différents et des propriétés différentes sont utilisées pour les indiquer ;
• Pour les retraits verticaux, les règles mathématiques ne s'appliquent pas - les intervalles se chevauchent, l'élément avec la plus grande valeur « gagne » ;
• négatif retrait de paragraphe utilisé pour indiquer la première ligne d'un paragraphe à l'aide d'une image.

La propriété détermine la quantité d'espace de texte horizontal qui doit être renvoyée à la ligne avant le début de la première ligne d'un élément de texte. L'espacement est calculé à partir du bord de départ de l'élément et du conteneur pour le niveau du bloc.

Étant donné qu'une grande partie du contenu d'une page Web est sous forme de texte, la capacité de styliser ce texte d'une manière à la fois attrayante et efficace est une compétence importante à posséder pour devenir concepteur de sites Web. Pour mettre en retrait une description et un paragraphe, la méthode la plus couramment utilisée et recommandée serait en utilisant CSS. Ici, vous serez fourni divers exemples de la façon dont CSS peut être utilisé pour le texte et l'élément indent.

Définir la marge supérieure en utilisant CSS

Pour créer des retraits supérieurs, on utilise, bien sûr, sans Propriétés CSS nous ne pouvons pas le faire, car nous avons besoin de margin-top, c'est une valeur qui peut être définie de différentes manières, comme en px et standard en pixels, em, % et ainsi de suite, que tout se passe dans le style CSS en unités de mesures.

Exemple d'utilisation :

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

Ce que vous pouvez voir sur l'image :

Vous pouvez également l'utiliser pour supprimer des blocs, ici vous pouvez utiliser une propriété appelée marge gauche Aussi marge droite Et marge inférieure. Là où nous indiquons simplement la propriété margin, où il est possible de lui définir initialement 4 paramètres, nous considérerons ici dans le sens des aiguilles d'une montre le concept où l'on part du côté supérieur avec continuation sous chacun des côtés.

marge : 20px 50px 30px 50px ;

Il y a aussi un remplissage supérieur en CSS

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

Exemple:

Bloc de rembourrage (
rembourrage supérieur : 47 px ;
}

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

remplissage : 10 px, 20 px, 40 px, 50 px ;

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

Maintenant, en fonction différentes situations, vous avez la possibilité de mettre le haut en retrait Styles CSS, où nous utilisons les propriétés marge Et rembourrage qu'il est possible de placer les éléments nécessaires sur la page de votre ressource Internet, comme vous l'aviez prévu et comme vous devez le faire.

La disposition CSS a toujours été rectangulaire. Toutes les lignes douces relèvent de la compétence du développeur. Les règles de style offrent suffisamment d'options pour donner à la page une forme lisse dans les limites de la résolution de l'écran. Mais tout élément de mise en page est toujours un rectangle dans lequel la disposition des informations est régie par des règles CSS.

Le remplissage latéral est important pour chaque élément de page lorsqu'il est positionné de manière absolue, et le remplissage supérieur CSS est spécifiquement défini car il est important pour différents éléments, en particulier ceux en ligne.

Règles de positionnement de base

Un élément bloc a une règle d'indentation sur les côtés de l'élément qu'il contient (marge), une règle d'indentation pour les éléments à l'intérieur (padding) et une largeur de bordure (border), qui peuvent également être utilisées.

L'indentation en haut est particulièrement importante. CSS dans un bloc associe les règles de remplissage aux règles pour les éléments positionnés de manière absolue et relative dans ce bloc.

Une pratique courante pour les règles CSS : vous pouvez spécifier le même remplissage de tous les côtés, par paires haut/bas et droite/gauche, ou pour chaque côté séparément. Par exemple,

• marge : 10px ;
• remplissage : 10px20px ;
• remplissage : 10px20px30px40px.

Dans le premier cas, l'indentation de l'élément par rapport aux côtés du conteneur extérieur dans lequel il se trouve est définie. Dans le second cas, les marges en haut et en bas sont de 10 px, à gauche et à droite de 20 px. Dans le troisième cas, la taille des retraits est indiquée de tous les côtés : haut, droite, bas et gauche.

Dans tous ces cas, l'indentation le CSS supérieur est de 10 px.

Règles qui changent la position des éléments

Si un élément de mise en page n'est pas positionné de manière absolue, il est positionné dans l'ordre général de formation des pages.

Si l'on définit remplissage au-dessus du CSS dans l'élément scCurrInfo, l'objectif sera atteint, mais s'il est au niveau li, il ne le sera pas.

Dans cet exemple, en utilisant la règle de remplissage : 40px; nécessite une réduction adéquate des règles de largeur et de hauteur de 80 px. DANS sinon La taille du bloc scCurrInfo dépassera les limites du bloc externe.

Si nous supprimons la règle de remplissage de la description scCurrInfo, mais l'ajoutons avec une valeur de 20px à la description du style d'élément de liste, nous n'obtiendrons que tiret supérieur. CSS n'appliquera pas cette valeur à d'autres parties.

Naturellement, cette utilisation de la règle d’indentation s’applique à chaque élément li.

Pratiques générales de formatage du contenu

Certains développeurs atteignent la perfection en disposant les pages à l'aide d'éléments de bloc. Apparemment, c'est une pratique classique : commencer avec des tableaux et terminer votre propre processus éducatif avec des blocs.

La liberté inhérente à la disposition des blocs est fascinante, et l'imagination du développeur ne peut pas être limitée par des règles de tableau strictes : uniquement des lignes, uniquement des cellules, fusionnant uniquement horizontalement et verticalement. Rien de particulier aux idées relationnelles.

Pendant ce temps, les tables, en plus des inconvénients évidents, présentent de nombreux avantages qualitatifs. Lors de la création d'un remplissage en haut, CSS prend en compte le remplissage à gauche, à droite (le bas est un moment spécial). Les règles des cellules du tableau vous permettent de contrôler l’alignement vertical et horizontal. En utilisant des styles de lignes et en les combinant avec des styles de cellules, vous pouvez créer des vues complexes du contenu.

La représentation habituelle d'une page sous forme de rectangles n'empêche nullement qu'elle soit présentée sous forme de tableau. Ce sont aussi des rectangles, mais ce sont aussi des cellules de tableau, c'est-à-dire qu'ils ont leurs propres règles qui complètent les règles des blocs.

Positionnement absolu

Bloquer avec la règle POSITION: absolue ; sera localisé à un emplacement déterminé par ses coordonnées par rapport au bloc dans lequel il se trouve.

Une caractéristique des règles CSS est que « la pratique est le meilleur critère de vérité » dans la plupart des cas, en particulier lorsque la compatibilité entre navigateurs est requise et que la mise en page est effectuée manuellement, il est préférable d'étudier des manuels à part entière sur des feuilles de style en cascade.

L'utilisation de tableaux entraîne souvent des problèmes de déplacement du contenu des cellules. Un décalage similaire au sein d’un bloc n’affecte pas toujours tous les éléments. En expérimentant, vous pouvez obtenir le résultat souhaité. Une tâche triviale : comment supprimer le remplissage supérieur n'est pas toujours une solution triviale pour CSS.

Dans certains cas, lorsque vous devez mettre en page des éléments de page dans les entrailles d'un système de gestion de contenu de site Web populaire, vous devez toujours prêter attention non seulement à la pratique expérimentale, mais également à l'expérience de vos collègues.

La disposition en blocs est souvent utilisée lors de la création d’un site Web ou d’un blog. En conséquence, il est souvent nécessaire d’indenter les blocs. Pour cette raison, environ comment indenter en CSS décrit en détail dans cette leçon. Pour le navigateur, chaque balise est un conteneur comportant du contenu, un remplissage, des marges extérieures et une bordure. Dans cette leçon, nous apprendrons comment créer des retraits internes et externes et considérerons leurs principaux paramètres.

La figure ci-dessous montre clairement les paramètres d'indentation du bloc :

Comme vous pouvez le voir, les retraits peuvent être effectués dans quatre directions : le retrait supérieur (en haut), le retrait inférieur (en bas), le retrait gauche (à gauche) et le retrait droit (à droite). Les unités de mesure peuvent être des pixels, des pourcentages et d'autres unités CSS. Apprenez-en davantage à leur sujet. Ce tutoriel utilise des pixels.

Blocage du rembourrage

La propriété responsable du remplissage en CSS est rembourrage. Voyons donc un exemple de définition d'un remplissage interne pour un bloc :

rembourrage supérieur : 5 px ; /*top padding*/ padding-left: 8px; /*remplissage gauche*/ padding-right: 8px; /*remplissage à droite*/ padding-bottom: 5px; /*rembourrage inférieur*/

Dans cet exemple, le remplissage est défini séparément pour chaque côté du bloc. De plus, il existe plusieurs façons de définir l'indentation en CSS :

marge : 5px 8px 5px 8px ; /*marges haut, droite, bas, gauche*/ margin: 5px 8px 5px; /*décrit les marges supérieure, gauche, droite et inférieure*/ margin: 5px 8px; /*décrit les marges supérieure et inférieure, droite et gauche*/ margin: 7px; /*décrit tous les remplissages internes de 7px*/

Il est plus facile de mémoriser la première et la dernière méthode. Dans le premier cas, les retraits sont placés dans le sens des aiguilles d'une montre (en haut, à droite, en bas, à gauche) - nous pouvons spécifier n'importe quelle quantité d'indentation dans ce dernier cas, les retraits de tous les côtés seront les mêmes ;

Bloquer les marges

La propriété responsable des marges en CSS est marge. Exemples de marges en CSS :

marge supérieure : 5 px ; /*marge supérieure*/ marge-gauche : 10px ; /*marge gauche*/ marge-droite : 10px; /*marge droite*/ margin-bottom: 5px; /*marge inférieure*/

remplissage : 5px 10px 5px 10px ; /*marges haut, droite, bas, gauche*/ padding: 5px 10px 5px; /*décrit le remplissage supérieur, gauche et droit et inférieur*/ padding: 5px 10px; /*décrit le remplissage supérieur et inférieur, droit et gauche*/ padding: 7px; /*décrit toutes les marges de 7px*/

Ainsi, comment indenter en CSS- la question n'est pas difficile, mais très pertinente. Pour mieux comprendre les informations décrites ci-dessus, n'oubliez pas qu'il existe deux propriétés : padding - retraits internes et margin - retraits externes. De plus, comme vous le savez déjà, il existe plusieurs façons de définir des retraits, vous pouvez les utiliser.