CSS padding remplace débordement?

Ce qui se passe ici ?

#agendaTitle{
    margin:0;
    padding:20em 0em 0em 0.75em;
    height:3em;
    overflow:hidden;
    background-color:#ff00ff;
}

Haut rembourrage est ridiculement élevé, simplement pour démontrer - avec un portrait réaliste de la condition de la div augmente en hauteur proportionnellement.

Sûrement le overflow:hidden signifie que je devrais voir un bloc de couleur ?
Se produit dans FF et IE

  • Que demandez-vous? Essayer de mieux expliquer et de le poster sur JSFiddle s'il vous plaît.
  • Si vous utilisez la valeur par défaut du modèle de boîte (boîte de contenu) qui doivent s'afficher comme un 23em très solide bloc de couleur (en supposant que c'est sur un div ou d'autres display: block élément). le rembourrage est ajoutée à la hauteur et n'est pas "en dehors" de la boîte ou serait masquée par débordement. Si vous voulez rembourrage soustrait de la taille plutôt que sur l'ajout d'utiliser box-sizing: border-box.
InformationsquelleAutor Datadimension | 2013-09-27
  1. 16

    Par défaut dans le content-box modèle de boîte sur un display: block élément, padding et height sont additionnées pour déterminer la hauteur totale de l'élément. overflow affecte uniquement les choses à l'extérieur de la boîte (en dehors de hauteur + padding + border).

    Si vous voulez frontière et rembourrage soustrait de hauteur spécifiée plutôt que sur l'ajout, à l'utilisation box-sizing: border-box.

    • Je suis étonné de la façon dont de nombreuses années, je n'ai pas connu rembourrage augmente la taille de la boîte. Vraiment je suis absolument stupéfait. De toute façon, comme la plupart des autres réponses ont été de droite, c'était la première posté
    • Merci! Comme une question de fait, les anciennes versions de IE utiliser le border-box style de modèle de boîte, où remplissage et de bordure sont soustraits de la taille plutôt que sur l'ajout de comme dans la CSS par défaut content-box modèle de boîte. Ils n'ont pas d'ajouter la prise en charge conforme à la norme content-box modèle jusqu'à IE6, et même alors, ce n'était pas par défaut!
    • IE ne vous adore!!!!!
    InformationsquelleAutor Ennui
  2. 0

    Comme ce

    démo

    css

    *{
    margin:0;
    padding:0;
}
#agendaTitle{
    margin:0;
    padding:0.75em 0em 0em 0.75em;
    height:3em;
    overflow:hidden;
    background-color:#ff00ff;
}
    InformationsquelleAutor Falguni Panchal
  3. 0

    Vous avez réglé la hauteur de 3em, donc il va montrer à la hauteur finale de ( 3em + 20em ).

    Et le débordement va limiter uniquement pour la hauteur je.e 3em.

    InformationsquelleAutor Ashis Kumar