et propriétés CSS.

Essayez de modifier les valeurs des propriétés marge Et rembourrage et vous comprendrez quoi.. et si c'est déjà clair, passons à autre chose..

Valeurs de marge et de remplissage possibles.

Dans l'exemple ci-dessus, l'attribution de propriétés marge Et rembourrage en utilisant une valeur, nous avons déterminé les marges et le remplissage de l'élément sur les quatre côtés. Pour spécifier différentes marges et tailles de remplissage pour chaque côté d'un élément, vous devez spécifier deux, trois ou quatre arguments séparés par un espace. De plus, selon le nombre de valeurs, le résultat sera différent.

Voici des exemples :

marge : 5px; - une valeur.
Une valeur - Les marges sont les mêmes de tous les côtés.

marge : 5px 40px ; - deux significations.
Première valeur : définit les marges des bordures supérieure et inférieure.

marge : 5px 40px 20px ; - trois significations.
Deuxième valeur - Définit les marges des bordures gauche et droite de l'élément.

marge : 5px 40px 20px 1px ; -quatre significations.
Première valeur - Définit la marge à partir de la bordure supérieure de l'élément.
Deuxième valeur - Définit la marge à partir de la bordure droite de l'élément.
Troisième valeur - Définit la marge à partir de la bordure inférieure de l'élément.
Quatrième valeur - Définit la marge à partir de la bordure gauche de l'élément.

AVEC rembourrage l'affaire suit le même principe que pour marge, le remplissage depuis les bordures internes de l'élément jusqu'au contenu prend des tailles en fonction du nombre d'arguments et de leurs valeurs.

Marge et remplissage des propriétés enfants.

Propriétés CSS marge Et rembourrage sont basiques et ont un certain nombre de propriétés enfants.

U marge ce:

• marge supérieure- Marge à partir de la bordure supérieure de l'élément parent,
• marge gauche- Marge à partir du bord gauche de l'élément parent,
• marge droite- Marge à partir du bord droit de l'élément parent,
• marge inférieure- Marge à partir de la bordure inférieure de l'élément parent.

Et rembourrage respectivement:

• dessus de rembourrage- Indenter depuis la bordure supérieure de l'élément jusqu'à son contenu,
• rembourrage-gauche- Retrait du bord gauche de l'élément jusqu'à son contenu,
• rembourrage à droite- Retrait du bord droit de l'élément jusqu'à son contenu,
• fond de rembourrage- Retrait de la bordure inférieure de l'élément jusqu'à son contenu.

Eh bien, je pense que c'est clair... s'il est nécessaire de déterminer le retrait ou la marge d'un seul côté d'un élément, il est préférable d'utiliser l'une des propriétés ci-dessus.

Les marges et le remplissage sont l'un des principaux composants de la conception d'un site Web, et il existe plusieurs directives à suivre à cet égard.

Évitez les remplissages courts, et plus encore, nuls depuis le contenu jusqu'aux bordures de l'élément, en particulier pour les blocs de texte. Le texte avec de petites marges et des retraits est difficile à lire et collant.

Suivez les règles de proportionnalité et de commensurabilité des marges et des retraits aussi bien pour un seul élément que pour l'ensemble de la page (composition des éléments) dans son ensemble.

L'un des moyens d'attirer l'attention d'un visiteur de la page sur l'endroit dont vous avez besoin est d'utiliser des retraits plus grands que d'habitude ; un tel contraste obligera le spectateur à regarder et à prêter attention aux endroits « spéciaux » du texte.

Dans cet article, je voudrais vous expliquer comment placer correctement des champs(rembourrage) et échancrure(marge) en CSS.

Tout d’abord, rappelons la définition des marges et du padding selon la spécification W3C. Dans le modèle boîte, les marges sont la distance entre le contenu et la bordure de la boîte. Et le remplissage est la distance entre la bordure d'un bloc et la bordure d'un élément adjacent ou parent.

Ainsi, si la bordure et l'arrière-plan de l'élément ne sont pas spécifiés, alors il n'y a pas de différence, utilisez la propriété padding ou margin pour définir les retraits, mais à condition que la largeur (largeur) et la hauteur (hauteur) de l'élément ne soient pas spécifiées. et l'algorithme de calcul des tailles de contenu à l'aide des propriétés de dimensionnement des boîtes.

Dans tous les cas, rappelez-vous que les marges peuvent être incluses ou non dans la largeur ou la hauteur de l'élément. Les retraits sont toujours définis en dehors de l'élément.

Voyons maintenant comment placer correctement les marges et l'espace entre les éléments. Prenons le bloc suivant comme exemple.

C'est le bloc d'actualités. Il se compose d'un en-tête, d'une liste d'actualités et d'un lien « Autres actualités ». Donnons-leur les noms de classe suivants : news__title, news__list et news__more-link.

Puisque chacun de ces éléments a les mêmes marges gauche et droite, il est préférable de définir les marges sur le bloc parent plutôt que de définir les marges gauche et droite pour chaque élément individuellement.

Actualités ( remplissage : 20px 25px ; )

Ainsi, si vous devez modifier la valeur des champs de droite et de gauche, il faudra le faire Dans un endroit. Et lors de l'ajout d'un nouvel élément à l'intérieur du bloc d'actualités, il aura déjà les indentations nécessaires à gauche et à droite.

Il arrive souvent que tous les éléments d'un bloc aient le même remplissage à gauche et à droite, sauf un, qui ne devrait pas avoir de remplissage du tout, par exemple en raison de l'arrière-plan. Dans ce cas, vous pouvez définir un remplissage négatif pour l'élément. Vous n’aurez alors pas besoin de supprimer les champs à l’intérieur du bloc pour d’autres éléments.

Vous devez maintenant définir les marges verticales entre les éléments. Pour ce faire, vous devez déterminer lequel des éléments est obligatoire. Évidemment, un bloc d'actualités ne peut exister sans une liste d'actualités ; en même temps, il ne peut pas y avoir de lien « Autres actualités » ; le titre peut également être supprimé, par exemple, lorsque le design est modifié.

En tenant compte de cela, nous avons défini le retrait en bas pour le titre, et le retrait en haut pour le lien « Autres actualités ».

News__title (marge en bas : 10 px ; ) .news__more-link ( marge en haut : 12 px ; )

Nous pourrions obtenir le même résultat externe en ajoutant un remplissage en haut et en bas de la liste des actualités.

News__list (marge : 10px 0 12px 0; )

Vous devez maintenant définir les retraits entre les articles d'actualité individuels. Encore une fois, veuillez noter que le nombre d’actualités peut varier et qu’il ne peut y avoir qu’une seule actualité répertoriée.

Vous pouvez définir un retrait supérieur pour chaque actualité sauf la première, ou un retrait inférieur pour chaque actualité sauf la dernière. La première option est préférable car le pseudo-sélecteur :first-child a été ajouté dans la spécification CSS 2.1 et a une prise en charge plus large, contrairement au pseudo-sélecteur :last-child, qui n'a été ajouté que dans la spécification CSS 3.0.

News__list-item (marge-haut : 18px; ) .news__list-item:premier-enfant (marge-haut : 0; )

Ainsi, le placement correct des marges et des retraits vous permet de modifier de manière flexible l'apparence de n'importe quel bloc sans apporter de modifications aux styles et sans perturber le design. Le plus important est de déterminer quels éléments du bloc sont les principaux ( obligatoire), et lesquels facultatif.

Parfois, nous ne pouvons pas compter sur les éléments requis. Par exemple, nous avons une fenêtre contextuelle dans laquelle un titre et un texte peuvent être affichés. De plus, dans certains cas, il peut n'y avoir aucun texte, et dans d'autres cas, aucun titre. Autrement dit, les deux éléments sont facultatifs.

Dans ce cas, vous pouvez utiliser la méthode suivante pour définir les retraits.

Popup__header + .popup__text (marge-haut : 15px ; )

Ensuite, l'indentation n'apparaîtra que si les deux éléments sont utilisés. Dans le cas de l'affichage uniquement du titre ou uniquement du texte, il n'y aura pas d'indentation supplémentaire.

Réduire les marges verticales

Une autre nuance que tout le monde ne connaît pas est liée aux espaces verticaux entre les blocs adjacents. La définition de l'indentation que j'ai donnée ci-dessus dit que l'indentation est la distance entre les frontières blocs actuels et voisins. Ainsi, si nous plaçons deux blocs l’un en dessous de l’autre et donnons à l’un d’eux une marge inférieure de 30 px et à l’autre une marge supérieure de 20 px, la marge entre eux ne sera pas de 50 px, mais de 30 px.

Autrement dit, les indentations se chevaucheront et l'indentation entre les blocs sera égale à l'indentation la plus grande, et non à la somme des indentations. Cet effet est également appelé « effondrement ».

Veuillez noter que les retraits horizontaux, contrairement aux retraits verticaux, ne « s'effondrent » pas, mais sont résumés. Les champs (padding) sont également résumés.

Connaissant « l’effondrement » des retraits, nous pouvons utiliser cette fonctionnalité à notre avantage. Par exemple, si nous devons mettre en retrait les titres et le texte à l'intérieur d'un article, alors pour le titre de premier niveau, nous définirons le retrait inférieur à 20 px, et pour le titre de deuxième niveau, le retrait supérieur est de 20 px et le retrait inférieur est de 10 px, et pour tous les paragraphes, nous définissons le retrait supérieur à 10px.

H1 ( marge inférieure : 24 px ; ) h2 ( marge supérieure : 24 px ; marge inférieure : 12 px ; ) p ( marge supérieure : 12 px ; )

Désormais, le titre h2 peut être placé soit après le titre h1, soit après le paragraphe. Dans tous les cas, la marge supérieure ne dépassera pas 24px.

Règles générales

Pour résumer, je voudrais énumérer les règles que je suis lors de l'organisation des marges et des retraits.

1. Si les éléments adjacents ont le même remplissage, il est alors préférable de les définir sur le conteneur parent plutôt que sur les éléments.
2. Lorsque vous définissez des retraits entre des éléments, vous devez déterminer si l'élément est obligatoire ou facultatif.
3. Pour une liste d’éléments similaires, n’oubliez pas que le nombre d’éléments peut varier.
4. Soyez conscient du rembourrage vertical et utilisez cette fonctionnalité là où elle vous sera bénéfique.

Balises : ajouter des balises

Dernière mise à jour : 04/08/2016

Un champ de texte sur une seule ligne est créé à l'aide de l'élément input lorsque son attribut type est défini sur text :

Vous pouvez personnaliser le champ de texte à l'aide d'un certain nombre d'attributs supplémentaires :

dirname : définit la direction du texte

maxlength : le nombre maximum de caractères autorisés dans un champ de texte

pattern : définit le modèle auquel le texte saisi doit correspondre

placeholder : définit le texte affiché par défaut dans la zone de texte

readonly : Rend le champ de texte en lecture seule

obligatoire : indique que le champ texte doit avoir une valeur

size : définit la largeur du champ de texte en caractères visibles

value : définit la valeur par défaut dans le champ de texte

Appliquons quelques attributs :

Envoyer Annuler

Dans cet exemple, la deuxième zone de texte définit immédiatement les attributs maxlength et size. Dans ce cas, la taille, c'est-à-dire le nombre de caractères qui rentrent dans l'espace visible du champ, est supérieur au nombre de caractères autorisé. Cependant, nous ne pourrons toujours pas saisir plus de caractères que la longueur maximale.

Dans ce cas, il est également important de faire la distinction entre les attributs value et placeholder, bien que les deux définissent le texte visible dans le champ. Cependant, l'espace réservé définit une sorte d'indice ou d'invite de saisie, il est donc généralement grisé. Tandis que la valeur représente le texte par défaut saisi dans le champ :

Les attributs en lecture seule et désactivé rendent le champ de texte indisponible, mais ont un effet visuel différent. En cas de désactivation, le champ de texte est grisé :

Parmi les attributs d'un champ de texte, il convient également de noter un attribut tel que list . Il contient une référence à un élément datalist, qui définit un ensemble de valeurs qui apparaissent sous forme d'info-bulle lorsqu'elles sont saisies dans un champ de texte. Par exemple:

Envoyer

L'attribut list d'un champ de texte pointe vers l'identifiant de l'élément datalist. L'élément datalist lui-même définit les éléments de la liste à l'aide d'éléments d'option imbriqués. Et lorsque vous tapez dans un champ de texte, cette liste apparaît sous forme d'info-bulle.

Champ de recherche

Pour créer des champs de recherche, utilisez l'élément input avec l'attribut type="search". Formellement, il s'agit d'un simple champ de texte :

Champ Mot de passe

Pour saisir un mot de passe, utilisez l'élément input avec l'attribut type="password". Sa particularité est que les caractères saisis sont masqués par des points :

Les marges et le remplissage sont des styles très importants lors de la création d'une page HTML. Ils permettent de positionner plus précisément les éléments, de créer un cadre avec les jeux nécessaires, etc. Les deux styles sont très similaires et remplissent des fonctions similaires. Mais il existe encore des différences.

Les éléments peuvent être imbriqués ou situés les uns à côté des autres. Regardons l'exemple suivant :

Nous avons deux tables, citron et bleue, situées l'une en dessous de l'autre. Les tableaux sont constitués d'une cellule. Il y a un bloc rouge dans la première cellule du tableau. À l’aide de cet exemple, regardons comment fonctionnent les marges et les retraits.

Les champs sont définis par style rembourrage. Ce style s'applique uniquement aux éléments conteneurs, qui peuvent contenir d'autres éléments. Le style permet de définir la marge entre les bords d'un élément et son contenu. Style marge vous permet de définir des retraits d'un élément vers les bordures les plus proches d'un autre élément. Les bordures d'un autre élément peuvent être les bordures du conteneur parent, ainsi que les bords de la page elle-même.

Il existe plusieurs façons de définir ces styles. Par exemple, spécifiez directement la taille de toutes les marges ou retraits avec un argument dans une unité de mesure (px, ex, em, pt, cm, etc.) :

remplissage : 3 px ; marge : 3px ;

Dans ce cas, les marges et les retraits seront les mêmes sur les quatre côtés. Lorsque vous spécifiez deux arguments séparés par un espace :

remplissage : 3px 5px ; marge : 3px 5px ;

le premier déterminera le nombre de marges/retraits en haut et en bas, le second - à gauche et à droite. Lorsqu'on lui donne trois arguments :

remplissage : 3 px, 5 px, 2 px ; marge : 3px 5px 2px ;

le premier est la marge/indentation en haut, le second est à la fois à gauche et à droite, le troisième est en bas. Avec quatre arguments :

remplissage : 3 px, 5 px, 2 px, 6 px ; marge : 3px 5px 2px 6px ;

le premier est la marge/espace en haut, le second est à droite, le troisième est en bas, le quatrième est à gauche. C'est facile à retenir : le premier se fait par le haut, puis dans le sens des aiguilles d'une montre. De plus, vous pouvez définir séparément les marges et le remplissage pour un bord spécifique, en utilisant les styles appropriés : dessus de rembourrage, rembourrage à droite, fond de rembourrage, rembourrage-gauche, marge supérieure, marge droite, marge inférieure, marge gauche. La valeur de ces styles ne peut être qu'un seul argument, qui spécifie la quantité de marge/remplissage pour un côté donné.

Dans la figure, le bloc rouge se trouve à l’intérieur de la cellule du tableau et à côté de ses bordures, c’est-à-dire que la cellule n’a pas de marges. Définissons les marges des cellules en utilisant le style :

remplissage : 5 px ;

En conséquence, la page deviendra la suivante :

Examinons maintenant les indentations. Deux tables sont adjacentes l'une à l'autre, si on veut les écarter un peu, on peut appliquer des retraits. Il y a deux options ici : soit définir le retrait inférieur du premier tableau, soit le retrait supérieur du deuxième tableau. Utilisons le deuxième :

marge supérieure : 5 px ;

Veuillez noter que nous définissons l'indentation spécifiquement sur le tableau, et non sur la cellule du tableau, comme c'est le cas pour les champs. Voici le résultat :

À propos, dans le premier cas (l'écart entre le bloc rouge et les limites de la cellule parent), le même effet pourrait être obtenu en définissant les retraits du bloc. De manière générale, si quelque chose n'est pas clair, faites-le-nous savoir dans les commentaires.

Code HTML de la page expérimentale :

<HTML > <tête > <titre > Test</titre> <méta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </tête> <corps > <style > tableau (largeur : 200 px ; hauteur : 150 px ; bordure : 1 px solide #555 ; bordure-collapse : effondrement) td (alignement vertical : haut ; remplissage : 0 px) div (largeur : 100 px ; hauteur : 100 px ; arrière-plan : rouge)</style> <style de table = "fond : citron vert" > <tr > <td style = "rembourrage : 5px" > <style div = "marge : 0px" ></div> </td> </tr> </tableau> <style de tableau = "arrière-plan : bleu ciel ; marge supérieure : 5px"> <tr > <td ></td> </tr> </tableau> </corps> </html>