CSS Question: Comment éviter que l'arrière-plan ne soit affecté par le remplissage?

J'ai une div simple avec une couleur de fond pour elle définie en CSS. Il y a un texte que je souhaite afficher sur cette div dans une certaine position, mais quand je le pad div provoque l'arrière-plan pour déplacer ainsi:CSS Question: Comment éviter que l'arrière-plan ne soit affecté par le remplissage?

#body { 
    margin-left: 10px; 
    background: red; 
}

Je veux simplement le texte à déplacer. Comment puis-je faire cela sans utiliser deux balises div?

Merci.

EDIT: Voici un exemple de ce que je travaille avec: http://jsfiddle.net/qQxF2/

Source

2010-08-16 Delup

Cela ne devrait pas se produire! Jetez un oeil à http://jsfiddle.net/5MNZJ/ – MvanGeest

MvanGeest a raison. Cela arrive si vous utilisez la marge, pas le rembourrage. Dans quel navigateur obtenez-vous ce résultat? Avez-vous testé avec d'autres? W3c valide-t-il votre page? Pouvons-nous avoir plus de code? :) – Sotiris

http://jsfiddle.net/qQxF2/ – Delup

Si vous ne disposez pas d'une frontière, utilisez le padding au lieu du margin.

#body { 
    padding-left: 10px; 
    background: red; /* this is not valid CSS! */ 
    background-color: red; /* this is valid */ 
}

Le W3C a une vaste et (espérons) texte précis sur the box model et des choses comme le rembourrage, la marge, les frontières, etc.

Source

2010-08-16 21:17:17 MvanGeest

Encore, la zone de marge (10px) va être blanche (ou quelle que soit la couleur héritée) –

Le texte W3C est précis tant que vous ne déclenchez pas le mode quirks dans MS Internet Explorer ... ;-) – ghoppe

@Nikita Rybak - puisque ma réponse a beaucoup changé, votre commentaire n'a pas vraiment de sens. @Delup - Je suis heureux de pouvoir vous aider. Cela ne nous a coûté que trois des ID uniques de jsFiddle et 30 minutes. :) Je vous souhaite bonne chance avec votre site. – MvanGeest

ajouter habituellement div extérieur (<div class="outer"><div class="inner">text</div></div>) pour résoudre ce

.outer { 
    background-color: red; 
} 
.inner { 
    padding-left: 10px; 
}

Source

2010-08-16 21:18:13

En réaction au commentaire sur ma réponse: vous avez raison, j'ai mal compris la question. Mais cela ne devrait pas se produire ... – MvanGeest

J'avais peur que je devrais recourir à l'aide de doubles divs. mais votre solution semble être la plus propre. sélectionnera cette réponse si aucune autre solution viable n'apparaît. merci – Delup

@Delup - quelle est la différence entre votre page et le jsFiddle dans mon commentaire sur votre question? @Nikita Rybak - même question ... – MvanGeest

Pourquoi ne pas définir la couleur d'arrière-plan sur l'étiquette du corps elle-même?

body { 
    background-color: red; 
} 

#body { 
    padding-left: 10px; 
}

Source

2010-08-16 21:19:00 pmalmsten

vous pourriez toujours plus il suffit d'appliquer le rembourrage au texte lui-même, selon la quantité de contenu que vous allez réellement avoir dans le conteneur div. Vous ne voulez vraiment pas nommer le corps div, puisque ce n'est pas très sémantique. Vous pourriez vouloir le changer en #container ou quelque chose de similaire afin de ne pas développer de mauvaises habitudes. le corps devrait être le corps de la page, pas un div.

Si votre juste avoir du texte, vous pouvez faire quelque chose comme ceci:

#container { background-color: red; } 
#container p { margin-left: 10xp; }

Sinon, si vous allez avoir un mélange de balises et contenu dans la div parent et que vous ne voulez pas Appliquez la marge individuellement (bien que techniquement vous devriez éviter l'habitude d'imbriquer des divs superflus), la réponse de Nikita devrait fonctionner pour vous, en supposant que vous voulez juste l'arrière-plan sur le div conteneur et pas toute la page elle-même.

Source

2010-08-16 21:39:16 Jervis

L'application d'un remplissage ne devrait pas décaler l'arrière-plan.

il doit décaler l'arrière-plan lorsque vous définissez la propriété de marge.

essayer ... suite

<html> 
<head> 
<style type="text/css"> 

.padding 
{ 
background-color:yellow; 
padding-left:150px; 
} 

.margin 
{ 
background-color:yellow; 
margin-left:150px; 
} 
</style> 
</head> 

<body> 

<div class="padding">This is a paragraph with padding.</div> 
<br/> 
<div class="margin">This is a paragraph with margin.</div> 

</body> 

</html>

Source

2010-08-16 21:44:42 N30

CSS Question: Comment éviter que l'arrière-plan ne soit affecté par le remplissage?

Répondre

Questions connexes