Différence entre marge et rembourrage?

Quelle est exactement la différence entre la marge et le remplissage en CSS? Cela ne semble vraiment pas avoir beaucoup de sens. Pourriez-vous me donner un exemple de l'endroit où se situent les différences (et pourquoi il est important de connaître la différence)?

paddingest l'espace entre le contenu et le border, tandis que marginl'espace en dehors de la frontière. Voici une image que j'ai trouvée à partir d'une recherche rapide sur Google, qui illustre cette idée.

Une chose clé qui manque dans les réponses ici:

Les marges supérieure / inférieure sont pliables.

Donc, si vous avez une marge de 20 pixels en bas d'un élément et une marge de 30 pixels en haut de l'élément suivant, la marge entre les deux éléments sera de 30 pixels au lieu de 50 pixels. Cela ne s'applique pas à la marge gauche / droite ni au rembourrage.

La marge est appliquée à l' extérieur de votre élément, ce qui affecte la distance de votre élément par rapport aux autres éléments.

Le remplissage est appliqué à l' intérieur de votre élément, ce qui affecte la distance du contenu de votre élément par rapport à la bordure.

En outre, l'utilisation de la marge n'affectera pas les dimensions de votre élément, tandis que le rembourrage rendra les dimensions de vos éléments (hauteur définie + rembourrage) .Par exemple, si vous avez un div 100x100px avec un rembourrage 5 px, votre div sera en fait 105x105px

Rappelez-vous ces 3 points:

• La marge est l'espace supplémentaire autour du contrôle.
• Le rembourrage est un espace supplémentaire à l' intérieur du contrôle.
• Le remplissage d' un contrôle externe est la marge d'un contrôle interne .

Image de démonstration: (où la boîte rouge est le contrôle du désir)

La défenition la plus simple est; le remplissage est un espace donné à l'intérieur de la bordure de l'élément conteneur et la marge est donnée à l'extérieur. Pour un élément qui n'est pas un conteneur, le rembourrage peut ne pas avoir beaucoup de sens, mais la marge aidera à l'organiser.

Le remplissage est un espace à l' intérieur de la bordure, tandis que Margin est un espace à l' extérieur de la bordure.

Rembourrage

Le remplissage est une propriété CSS qui définit l'espace entre le contenu d'un élément et sa bordure (s'il a une bordure). Si un élément est entouré d'une bordure, le remplissage donnera de l'espace à partir de cette bordure au contenu de l'élément qui apparaît dans cette bordure. Si un élément n'a pas de bordure autour, l'ajout de remplissage n'a aucun effet sur cet élément, car il n'y a pas de bordure pour donner de l'espace.

Marge

La marge est une propriété CSS qui définit l'espace extérieur d'un élément au prochain élément extérieur.

La marge affecte les éléments qui ont ou non des bordures. Si un élément a une bordure, margin définit l'espace entre cette bordure et l'élément extérieur suivant. Si un élément n'a pas de bordure, alors margin définit l'espace entre le contenu de l'élément et l'élément extérieur suivant.

Différence entre le rembourrage et la marge

Ainsi, la différence entre la marge et le rembourrage est que, tandis que le rembourrage concerne l'espace intérieur, la marge concerne l'espace extérieur jusqu'à l'élément extérieur suivant.

L'une des principales différences entre la marge et le remplissage n'est mentionnée dans aucune des réponses: cliquabilité et détection de vol stationnaire

L'augmentation du rembourrage augmente la taille effective de l'élément. Parfois, j'ai une petite icône que je ne veux pas agrandir visiblement, mais l'utilisateur doit toujours interagir avec cette icône. J'augmente le rembourrage de l'icône pour lui donner une plus grande empreinte pour les clics et le survol. Augmenter la marge de l'icône n'aura pas le même effet.

Une réponse à une autre question sur ce sujet en donne un exemple.

margin = espace autour (extérieur) de l'élément de la bordure vers l'extérieur.

padding = espace autour (à l'intérieur) de l'élément du texte à la bordure.

voir ici: http://jsfiddle.net/robx/GaMpq/

Il est bon de connaître les différences entre marginet padding. Comme je le sais:

• La marge est l' espace extérieur d'un élément, tandis que le rembourrage est l' espace intérieur d'un élément. En d'autres termes, la marge est l'espace à l'extérieur de la bordure d'un élément, tandis que le remplissage est l'espace à l'intérieur de sa bordure.
• Vous pouvez définir la autovaleur sur margin. Cependant, il n'est pas autorisé pour le rembourrage. Regardez ça .
  Remarque: utilisez margin: autopour centrer horizontalement un élément de bloc à l'intérieur de son parent. Il est également possible de centrer un élément à l'intérieur d'une boîte flexible verticalement ou horizontalement, ou les deux, en définissant la marge sur auto. Regardez ça .
• La marge peut être n'importe quel nombre flottant, mais le remplissage ne doit pas être négatif.
• Lorsque vous stylisez un élément, le rembourrage sera également stylisé; mais pas de marge. La marge obtient le style de l'élément parent. Par exemple, lorsque vous définissez la background-colorpropriété sur noir, son espace intérieur (c'est-à-dire le remplissage) sera noir, mais pas son espace extérieur (c'est-à-dire la marge).

La marge est l'espace en dehors de la boîte; le rembourrage est l'espace à l'intérieur de la boîte. Il est difficile de voir la différence avec un remplissage blanc, mais avec un remplissage coloré, vous pouvez le voir très bien.

La marge et le remplissage sont deux types de remplissage vraiment ... L'un (marge) sort de la bordure des éléments pour l'éloigner des autres éléments et l'autre (remplissage) va en dehors du contenu des éléments pour éloigner le contenu de la bordure des éléments.

Le rembourrage permet au développeur de maintenir un espace entre le texte et son élément englobant. La marge est l'espace que l'élément conserve avec un autre élément du DOM parent.

Voir l'exemple:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

La marge est une propriété en CSS utilisée pour créer des espaces autour des éléments, en dehors de la bordure. Le programmeur peut définir la marge pour le haut, la droite, le bas et la gauche. En d'autres termes, il peut définir ces valeurs à l'aide de margin-top, margin-right, margin-bottom et margin-left.

Les valeurs de marge peuvent être des types suivants.

Tout d'abord, auto permet au navigateur de calculer la marge. De plus, la longueur indique une marge en px, pt ou cm, tandis que% aide à décrire une marge en pourcentage par rapport à la largeur de l'élément contenant. Enfin, hériter signifie que la marge doit hériter de l'élément parent.

Le remplissage est une propriété en CSS qui aide à créer de l'espace autour d'un élément à l'intérieur de la bordure. Le programmeur peut définir le rembourrage en haut, à droite, en bas et à gauche. En d'autres termes, il peut définir ces valeurs à l'aide de padding-top, padding-right, padding-bottom et padding-left.

Les valeurs de remplissage peuvent être des types suivants.

La longueur décrit le remplissage en px, pt ou cm, tandis que% indique le remplissage en pourcentage par rapport à la largeur de l'élément contenant. Enfin, hériter décrit que le remplissage doit être hérité de l'élément parent.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Différence entre la marge et le rembourrage

La marge est une propriété CSS qui est utilisée pour créer de l'espace autour de l'élément en dehors de la bordure définie, tandis que le remplissage est une propriété CSS qui est utilisée pour créer de l'espace autour de l'élément, à l'intérieur de la bordure définie. Ainsi, cela explique la principale différence entre la marge et le rembourrage.

Valeurs De plus, les valeurs de margin peuvent être auto, length,% ou inherit, tandis que les valeurs de padding peuvent être length,% ou inherit type. Par conséquent, c'est une autre différence entre la marge et le rembourrage.

En bref, la marge et le remplissage sont deux propriétés en CSS qui permettent de styliser les pages Web. Il n'est pas possible d'attribuer des valeurs négatives à ces propriétés. La principale différence entre la marge et le remplissage est que la marge aide à créer de l'espace autour de l'élément en dehors de la bordure, tandis que le remplissage aide à créer de l'espace autour de l'élément à l'intérieur de la bordure.

Essayez de mettre une couleur d'arrière-plan sur un bloc div avec largeur et hauteur. Vous verrez que le remplissage augmente la taille de l'élément, tandis que la marge le déplace simplement dans le flux du document.

La marge sert spécifiquement à déplacer l'élément autour.

Le remplissage est l'espace entre les composants les plus proches sur la page Web et la marge est l'espace à partir de la marge de la page Web.

Une chose que je viens de remarquer mais aucune des réponses ci-dessus n'a été mentionnée. Si j'ai un élément DOM créé dynamiquement qui est initialisé avec un contenu html interne vide, c'est une bonne pratique d'utiliser la marge au lieu du remplissage si vous ne voulez pas que cet élément vide occupe un espace sauf si son contenu est créé.

Il y a une différence importante:

La marge est à l'extérieur de l'élément, c'est-à-dire que l'on appliquera le décalage d'espace "après" le début de l'élément. Le rembourrage est à l'intérieur, l'autre appliquera le blanc "avant" le début de l'élément.

La marge est appliquée à l'extérieur de votre élément, ce qui affecte la distance qui sépare votre élément des autres éléments.

Le remplissage est appliqué à l'intérieur de votre élément, ce qui affecte la distance du contenu de votre élément par rapport à la bordure.

En outre, l'utilisation de la marge n'affectera pas les dimensions de votre élément, tandis que le rembourrage rendra les dimensions de vos éléments (hauteur définie + rembourrage) .Par exemple, si vous avez un div 100x100px avec un rembourrage 5 px, votre div sera en fait 105x105px

Fondamentalement, la différence entre le rembourrage et la marge vient du fond. Le rembourrage décidera de l'espace entre le contenu, tandis que la marge décidera du bord extérieur des éléments!

Le remplissage est l'espace entre votre contenu et la bordure. Où Margin est l'espace entre la bordure et l'autre élément.