[CSS] unterschied: margin und padding

Dieses Thema im Forum "Webdesign" wurde erstellt von BladeFire, 27. April 2012 .

Schlagworte:
  1. 27. April 2012
    Zuletzt bearbeitet: 27. April 2012
    unterschied: margin und padding

    Hi

    ich habe zwar ein buch darüber doch irg. wie ist ein wenieg komplziert erklärt.

    Könntet ihr mir pls verwendungszwecke sagen (wo man padding und wo margin braucht)

    Danke

    Mfg simon

    Edit: Achja ich hab noch ein problem bei meiner webseite wird oben auch ein padding gemacht obwohl ich es eig. auf 0 eingestellt habe. Wieso?

    (beim editiern gibts keinen spoiler)CSS Quelltext:
    ________________________________


    h1
    {color: green;font-family:"Harlow Solid Italic"
    }



    a:link
    {
    color: blue;
    }
    a:visited
    {
    color: green;
    }
    a:active
    {
    font-weight:700;
    }
    a:link,a:visited
    {
    text-decoration: none;
    }
    a:hover
    {
    text-decoration: underline;
    }



    strong
    {
    font-size: large; font-weight: 700;
    }
    body
    {
    background-image: url(body.gif);background-repeat: repeat-x;background-color: #115676;padding: 0% 10% 5% 10%;
    }

    div#neuedoku
    {
    background-image: url(bildneue.png) ;width:10%;height:500px;text-align: left;
    }



    hr
    {
    text-align: right;
    }
    div#all
    {
    background: transparent url(hintergrundbild.png);
    }
    ___________________________________________
     
  2. 27. April 2012
    AW: unterschied: margin und padding

    padding is der abstand von einem element nach innen und margin der nach außen
     
    1 Person gefällt das.
  3. 27. April 2012
    AW: unterschied: margin und padding

    hier gut zu ehen
    CSS Box Model
    Innen und Außenabtände ;-)
     
    1 Person gefällt das.
  4. 27. April 2012
    AW: unterschied: margin und padding

    ok danke

    habs jetzt kapiert wenn ich im inneren elemt margin: xx hernehme dann ist das das gleich wie wenn ich in den äußeren padding xx hernehme.

    kurz noch eine zusatzfrage: sollte ich es bei beiden mache, werden die dann addiert? oder gewinnt das größere? Oder ist das dann wieder mit der reihenfolge bzw !important?

    Danke :]
     
  5. 27. April 2012
    AW: unterschied: margin und padding

    margin = außen
    padding = innen

    beachte padding verbreitert das element.
    d.h. element 100px breit und padding: 0 10px = 120px breite

    es wird addiert!
    !important wird nicht helfen.
     
  6. 27. April 2012
    AW: unterschied: margin und padding

    An sich ist diese Aussage richtig, aber es gibt nun box-sizing mit dem sich das Verhalten bestimmen lässt.

    Die Folgende Box ist genau 100px x 100px trotz des Padding von 8px pro Seite:
    HTML:
    #box1 {
     display: block;
     position: relative;
     padding: 8px;
     width: 100px;
     height: 100px;
     box-sizing: border-box;
    }
     
    2 Person(en) gefällt das.
  7. 27. April 2012
    AW: unterschied: margin und padding

    interessant, danke für den hinweis.
    und das können alle browser, hurra.

    BW
     
  8. 27. April 2012
    AW: unterschied: margin und padding

    > W3Fools – A W3Schools Intervention

    Wurde alles schon gesagt. Innen- und Außenabstand.
     
  9. 28. April 2012
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: unterschied: margin und padding

    @Nanobyte nicht vergessen: -moz-box-sizing
    firefox/gecko hat aufgrund eines bugs das prefix noch nicht entfernt
    -> box-sizing - CSS | MDN

    btt: in firefox einfach mal firebug öffnen, im tab "html" ein element anwählen und dann im panel rechts daneben auf layout klicken:

    Bild
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.