# padding-top in Prozent



## javaAnfänger3 (2. Januar 2018)

Hallo,
kann mir einer erklären, was mit dieser Aussage gemeint ist?
Ich verstehe enfach nicht, was gemeint ist.
Selbst mit Code verstehe ich nicht die Aussage.

"Wenn man padding-top in Prozent angibt, dann bezieht sich diese Prozentangabe nicht etwa auf die Höhe der Seite, sondern auf die Breite. D.h. mit padding-top in Prozent haben wir plötzlich etwas, das eine Höhe erzeugt.
Diese Höhe aber in Abhängigkeit von der Breite erzeugt. => Wir haben eine skalierbare Höhe."



Spoiler: Code





```
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="test.css">
        <style>
            html, body{
                height:100%;
                width:100%;
                margin: 0
            }
            #div1{
                width: 50%;
                height: 40%;
                background-color: orange;
                color:white;
                font-size: 20px;
            }
            #div2{
                width: 60%;
                height: 30%;
                background-color: yellow;
                color:white;
                font-size: 20px;
                padding-top: 10%;
            }
        </style>
    </head>
    <body>
            <div id="div1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr
                            <div id="div2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                        </div>


    </body>
</html>
```


----------



## javaAnfänger3 (3. Januar 2018)

Und noch eine Frage.
Wozu wird diese Zeile verwendet? Das hat wahrscheinlich irgendwas mit Mobile Webdesign zu tun aber ich weiß nicht genau wozu man diese Zeile braucht.
<meta name="viewport" content="width=device-width, initial-scale=1.0">


----------



## EuroCent (3. Januar 2018)

Naja Padding-Top ist nicht für die Breite sondern für den Abstand von Oben im inneren einer Box gemeint.
Hier: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/padding

Schau dir das hier mal an: http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
Dort steht es verständlich da


----------



## javaAnfänger3 (5. Januar 2018)

Ich weiß aber immer noch nicht, was mit der Aussage gemeint ist?

"Wenn man padding-top in Prozent angibt, dann bezieht sich diese Prozentangabe nicht etwa auf die Höhe der Seite, sondern auf die Breite. D.h. mit padding-top in Prozent haben wir plötzlich etwas, das eine Höhe erzeugt.
Diese Höhe aber in Abhängigkeit von der Breite erzeugt. => Wir haben eine skalierbare Höhe."


----------



## Sempervivum (5. Januar 2018)

Beispiel:
Breite 400px
Höhe 200px
padding-top: 10%
Es ergibt sich ein Wert von 40px und nicht 20px wie man eigentlich erwarten würde.


----------



## EuroCent (5. Januar 2018)

Sempervivum hat gesagt.:


> Beispiel:
> Breite 400px
> Höhe 200px
> padding-top: 10%
> Es ergibt sich ein Wert von 40px und nicht 20px wie man eigentlich erwarten würde.



Rechnerisch müsste es aber 20px von 200px sein.
Wie kommt die 20px Differenz zu stande?

Er rechnet ja nicht mal 2 sondern er weiß ja schon vorweg das er nur den Abstand der Höhe berechnen muss.

Wie also kommt da die Differenz zustande?


----------



## Kalito (5. Januar 2018)

javaAnfänger3 hat gesagt.:


> Diese Höhe aber in Abhängigkeit von der Breite erzeugt



Das Padding ergibt sich aus den 400px.


----------



## EuroCent (5. Januar 2018)

Kalito hat gesagt.:


> Das Padding ergibt sich aus den 400px.


Das versteh Ich nicht, wieso die Abhängigkeit der Breite?

Wenn er TOP Berechnet, berechnet er doch nicht die Breite.
Das ergibt für mich keinen Sinn oO
Für was dann padding-left, padding-right wenn es bei top schon die Breite nimmt.

Gibt es dafür eine Logisch und Plausible Erklärung?


----------



## MrMurphy (6. Januar 2018)

Hallo



> Gibt es dafür eine Logisch und Plausible Erklärung?



Ja, das erleichtert das Erstellen von Webseiten. 

Wer das padding wirklich von der Fensterhöhe abhängig machen will kann zu der Einheit vh greifen. Die funktioniert ähnlich wie Prozent, 100vh sind die aktuelle Fensterhöhe.

Gruss

MrMurphy


----------



## EuroCent (7. Januar 2018)

MrMurphy hat gesagt.:


> Hallo
> 
> 
> 
> ...



Das ist mir schon bewusst.
Das erklärt aber nicht warum er die Breite als Berechnung einbezieht, statt der Höhe.


----------



## Kalito (7. Januar 2018)

Naja, laut MDN: 





> Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht


----------

