Mon élément h3 occupe toute la place de mon élément div

Bonjour,

Voici mon problème : J'ai un élément h3, et lorsque mon cursor se mets dessus, le texte commence à bouger. Par contre, l'élément h3 prends toute la dimension du div. Donc, même lorsque mon cursor n'est pas sur le texte, mais sur l'élément div du texte, ce dernier se met à bouger. Je ne comprends pas pourquoi mon h3 prend les mesures du div, je ne lui est appliquer aucun padding ou margin, seulement un line-height. J'ai également essayer d'appliquer l'élément inherit, mais rien n'a changer. Voici une image expliquant le problème :

https://lh3.googleusercontent.com/-herEHGCH9SY/Vns7giceJ3I/AAAAAAAADB4/MCLfJaYgYjQ/h120/Capture%2Bd%25E2%2580%2599e%25CC%2581cran%2B2015-12-23%2Ba%25CC%2580%2B19.25.11.png

Voici le code :

Le code de l'élément h3 : (.shakeme = h3)

.shakeme {
  margin: 0px;
  color: white;
  font-family: Minecrafter;
  font-weight: normal;
  font-size: 40px;
  line-height: 760px;
  text-align: center;
}

Le code du div :

#image1 {
  height: 710px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  
}

Merci et j'espère que quelqu'un pourra m'aider !

Cordialement,

Jacob

Bonjour,

Je ne suis pas certains d'avoir compris toutes les explications, mais ce qui est sûr : l'élément h3 est un élément block, et en tant qu'élément block il prend naturellement tout l'espace disponible en largeur.

Lire cet article de Raphaël Goetter : width: 100%, tu es le Mal !