Propriété CSS pour tampon texte à l'intérieur de la div

Est-il un moyen de donner un div élément de rembourrage à l'INTÉRIEUR de ses frontières? Par exemple, actuellement, tout le texte à l'intérieur de mon principal div élément va droit vers le bord de l'élément de la frontière. J'aimerais, comme une règle générale sur ce site, pour avoir au moins 10 à 20 px de l'espace entre le texte et la bordure.

Voici une capture d'écran pour illustrer ce que j'ai actuellement:

Propriété CSS pour tampon texte à l'intérieur de la div

ajouter le rembourrage pour les éléments à l'intérieur de la div

OriginalL'auteur NealR | 2013-12-10

  1. 21

    Je vois beaucoup de réponses ici, qu'avez-vous en soustrayant de la largeur de la div et/ou de l'utilisation de box-sizing, mais tout ce que vous devez faire est d'appliquer le rembourrage de l'enfant des éléments de la div en question. Ainsi, par exemple, si vous avez quelques majoration comme ceci:

    <div id="container">
    <p id="text">Find Agents</p>
</div>

    Tout ce que vous devez faire est d'appliquer ce CSS:

    #text {
    padding: 10px;
}

    Ici est un violon montrant la différence: http://jsfiddle.net/CHCVF/2/

    Ou, encore mieux, si vous disposez de plusieurs éléments et n'ont pas envie de donner tous de la même classe, vous pouvez faire quelque chose comme ceci:

    .container * {
    padding: 5px 10px;
}

    Qui permet de sélectionner tous les éléments d'enfant et de leur attribuer le rembourrage que vous voulez. Voici un violon de ce que dans l'action: http://jsfiddle.net/CHCVF/3/

    C'est ce que j'ai créé un div appelé contentContainer et qui a donné une marge de 20px. thx
    Pas de problème, content que vous avez compris
    .container * ne fonctionne pas si vous avez plusieurs conteneurs à l'intérieur. Tous les contenants intérieurs obtiendrez également le rembourrage qui peut être indésirable.

    OriginalL'auteur Dryden Long

  2. 18

    La propriété CSS que vous cherchez est de rembourrage.
    Le problème avec un rembourrage est qu'il ajoute à la largeur de l'élément d'origine, donc si vous avez un div avec une largeur de 300px, et ajouter 10px de rembourrage, la largeur sera désormais 320px (10px à gauche et à 10px sur la droite).

    Pour éviter cela, vous pouvez ajouter des box-sizing: border-box; à la div, cela permet de maintenir le désigné largeur, même si vous ajoutez un rembourrage.
    Si votre CSS devrait ressembler à ceci: 

    div {
    box-sizing: border-box;
    padding: 10px;
}

    vous pouvez en lire plus à propos de box-sizing et globale (prise en charge du navigateur ici:

    http://www.paulirish.com/2012/box-sizing-border-box-ftw/

    OriginalL'auteur Joel

  3. 5

    Suffit d'utiliser div { padding: 20px; } et soustraire 40px à partir de l'original de votre div largeur.

    Comme Philippe Testaments souligné, vous pouvez également utiliser box-sizing au lieu de soustrayant 40px:

    div {
    padding: 20px;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

    La -moz-box-sizing est pour Firefox.

    Pouvez-vous ajouter un jsFiddle trop?
    ou ajouter box-sizing: border-box... (au lieu de soustraire 40)
    bonne réflexion, je l'ai ajouté à ma réponse.
    Seul problème avec cette solution est qu'il explose ma barre de navigation. Dû créer un div conteneur autour de la div principale et de simplement donner qu'une marge de 20px. merci bien, ne savent pas à propos de border-box.

    OriginalL'auteur Jarno

  4. 0

    Rembourrage est une manière d'ajouter une sorte de marge à l'intérieur de la Div.

    Utilisez Simplement 

    div { padding-left: 20px; }

    Et à mantain la taille, vous auriez à -20px à partir de l'original de la largeur de la Div.

    OriginalL'auteur GDSeabra