Sympatisant: Padding, width, Auswirkungen

Salvete,

manchmal scheitere ich echt noch an den Grundsaetzen!
Kann mir mal bitte einer erklaeren, warum sich das Padding
auf die Breite auswirkt bzw. warum es sich additiv verhaelt?
Ich meine, das Padding bestimmt doch den _Innen_abstand..
beim Margin kann ich es ja verstehen.

  
<HTML>  
 <HEAD>  
  <style type="text/css">  

  
   label.headline2 {  
    border:1px solid red;  
    display:block;  
    padding-right:40px;  
    width:100%;  
   }  

  
  </style>  
 </HEAD>  
 <BODY>  
  <label class="headline2"> Testlabel </label>  
 </BODY>  
</HTML>  

Das Lebel geht ueber den Bildschirmrand hinaus. Das moechte ich
jedoch nicht.

Gruss & Danke.

MfG,
Sympatisant

--
"Non dura iubeantur, non prohibeantur inpura."
  1. Ich meine, das Padding bestimmt doch den _Innen_abstand..

    tut es ja auch - den abstand von border zum inhalt

    aber nur bei defektem boxmodell im internet explorer (quirksmode) wird padding von der gesamtbreite abgezogen - und bei deinem codeschnipsel wirst du defintiv im ie6 gewünschtes verhalten haben, weil quirksmode

    Das Lebel geht ueber den Bildschirmrand hinaus. Das moechte ich
    jedoch nicht.

    width: auto; statt 100%

  2. Hey

    Kann mir mal bitte einer erklaeren, warum sich das Padding
    auf die Breite auswirkt bzw. warum es sich additiv verhaelt?

    Schau dir mal das Box-Modell an. Vielleicht bringts dich ja weiter.

    Außerdem kannst du's mal in verschiedenen Browsern probieren, der Internet Explorer 6 dürfte es so anzeigen, wie du es haben willst... was noch lange nicht heißt, dass es richtig ist.

    1. Salvete,

      ne, hab's nur im FF getestet.
      Aber mit width:auto funktionierts wunderbar.

      Besten Dank euch allen!

      MfG,
      Sympatisant

      --
      "Non dura iubeantur, non prohibeantur inpura."
  3. Hi,

    manchmal scheitere ich echt noch an den Grundsaetzen!

    ja, das merkt man schon daran, dass Dein HTML-Code keinen DOCTYPE enthält. Außerdem solltest Du alle Elemente und Attribute grundsätzlich klein schreiben.

    Kann mir mal bitte einer erklaeren, warum sich das Padding
    auf die Breite auswirkt bzw. warum es sich additiv verhaelt?

    Das tut es nicht - im Gegenteil. Die width, also die Breite der Content-Area innerhalb der Box, bleibt unverändert. Außer im IE, wenn sich dieser im Quirks-Mode befindet.

    Ich meine, das Padding bestimmt doch den _Innen_abstand..

    Nein. Es ist lediglich innerhalb der Border-Area.

    Das Lebel geht ueber den Bildschirmrand hinaus. Das moechte ich
    jedoch nicht.

    Dann verwende einen sinnvolleren Wert für die width-Eigenschaft, beispielsweise 'auto'.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Salvete,

      ja, das merkt man schon daran, dass Dein HTML-Code keinen DOCTYPE
      enthält.

      Das war doch nur ein kastriertes Beispiel..

      Kann mir mal bitte einer erklaeren, warum sich das Padding
      auf die Breite auswirkt bzw. warum es sich additiv verhaelt?
      Das tut es nicht - im Gegenteil. Die width, also die Breite der
      Content-Area innerhalb der Box, bleibt unverändert.

      Dann kommt es also auf die Betrachtungsweise an ;) Fuer mich wird
      der rot-umrahmte Bereich einfach laenger..

      Dann verwende einen sinnvolleren Wert für die width-Eigenschaft,
      beispielsweise 'auto'.

      Genial.. das klappt wunderbar. Danke!

      MfG,
      Sympatisant

      --
      "Non dura iubeantur, non prohibeantur inpura."
      1. @@Sympatisant:

        Das war doch nur ein kastriertes Beispiel..

        Kastrierte Beispiele sind aber nicht fruchtbar.

        Live long and prosper,
        Gunnar

        --
        Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.