Supprimer le padding pour un élément seulement.

Sujet résolu

20 septembre 2020 à 11:43:18

Bonjour,

J'ai un bloc <div>, appelé ".bloc_gauche" dans lequel j'ai défini un padding de 1em .

Or, je voudrais, pour un des éléments contenu dans ce div, que le padding ne s'applique pas.

J'ai essayé de mettre le padding à zéro avec une balise <span> (span class="titre_bloc_gauche") pour l'élément concerné mais ça ne fonctionne pas.

Merci d'avance pour votre aide.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre de la page</title>
        <link rel="stylesheet" href="style.css"/>
    </head>

    <body>
    	<div class="bloc_gauche">
	    	<p>
	    		<img src="images/photo_cv_mini.jpg" alt="Photo de Christophe DEMETTE" />
	    	</p>
	    	<p>
	    		<strong>Monsieur ...</strong><br />
	    		Fonction
	    	</p>
	    	<p span class="titre_bloc_gauche">CONTACT</p>
			
	    	
    	</div>

    </body>
</html>

html
{
	 font-family: arial, sans-serif;
	 font-size: 14px;
}

.bloc_gauche
{
	width:15em;
	background-color: rgb(242,242,242);
	padding: 1em;
	text-align: center;
}

.titre_bloc_gauche
{
	height: 2em;
	padding-left: -10px;
	background-color: rgb(59,56,56);
	color: white;


}

Domi65

20 septembre 2020 à 12:11:22

Si tu veux "supprimer" le padding de l'élément le contenant (son conteneur) , tu peux lui donner une position relative avec une valeur contraire au padding.

Par exemple pour qu'un élément soit positionné complètement à gauche dans un élément de classe bloc_gauche bloc_gauche tu lui donnes ces attributs CSS :

position: relative; left: -1em

nybelphe

20 septembre 2020 à 12:19:33

Super ! Merci.

Mon élément s'est bien décalé à gauche, mais il ne prend pas toute la largeur sur la droite.

J'ai essayé d'ajouter à l'instruction "right: +1em" :

position:relative;left: -1em;right: +1em;

mais ça ne fonctionne pas.

J'ai aussi essayé de redéfinir une largeur plus grande mais ça ne fonctionne pas non plus.

Merci d'avance.

Lamecarlate

20 septembre 2020 à 12:21:15

Bonjour,

"p span", tu es sûr de ça ?

Je conseillerais plutôt ici une marge négative, mais le principe est le même.

Ensuite : il y a deux éléments dans le conteneur. Y en aura-t-il plus ? Auquel cas faire du spécifique pour le second/dernier est pertinent. Sinon, ne pas mettre de padding sur le conteneur mais sur le premier élément uniquement, ça peut être une solution.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

nybelphe

20 septembre 2020 à 13:40:28

Merci pour le conseil.

Domi65

21 septembre 2020 à 17:30:51

Si tu veux qu'il n'y ai de padding ni à gauche ni à droite, tu peux t'y prendre autrement : tu enlève le padding et donne un margin à tous les élément inclus sauf à celui qui ne doit pas en avoir :

#parent {
  padding-left:0;
  padding-right:0
}
#parent > *{
  margin-left : 1em;
  margin-right: 1em
}
#parent #touelongueur{
  margin: 0
}

nybelphe

18 octobre 2020 à 12:27:03

Merci pour l'info.

Bonne journée.