CSS/ Box Modell Erklärung

[BloodyRogue]

Hallo zusammen

Ich bringe mir zu Hause ein bischen HTML + CSS bei. Auf little-boxes.de steht bei kapitel 8 ein boxmodell.


Mein Problem liegt dabei, das ich den unterschied von padding border und margin nicht verstehe. Durch das Ausprobieren mit Dreamweaver kamen noch mehr probleme dazu.

Könnte mir bitte jemand den Unterschied dieser 3 Bereich erklären? WÄRE sehr dankbar

[remix]

- margin ist der Aussenabstand eines Elementes zum Nachbarn (Leerraum zwischen Elementen)
- padding ist der Innenabstand eines Elementes (Leerraum vom Inhalt bis zur äusseren Begrenzung eines Elementes)
- border ist eine Umrandung eines Elements (der Rahmen eines Elementes)

alles lässt sich einzeln für right, left, top und bottom definieren.

Das Problem ist, dass nicht alle Element diese Eigenschaften in gleicher Weise unterstützen und in manchen Browsern das Resultat nicht immer aussieht, wie erwartet.

Theoretisch sieht dann ein Element so aus:

[BloodyRogue]

Hallo
Vielen Dank für die Info.

Ic hhabe noch ne frage zum Code:

/*=========================================================================================================
Stylesheet für die Beispielsite aus "Little Boxes"
Stand: End eKapitel "Ordnung halten im Stylesheet"
Datei: bildschirm.css
Datum: 20.02.2013
Autor: Mesut Demir

Aufbau: 1. Kalibrierung und Restauration
		2. Allgemeine Styles
		3. Styles für Layoutbereiche
		4. Sonstige Styles
===========================================================================================================*/

/*==================================================================
	1. Kalibrierung und Restauration
==================================================================== */
* { padding: 0; margin: 0; }
html { overflow-y: scroll; }
h2, p, ul, ol { margin-bottom: 1em; }  
ul ul { margin-bottom: 0; } 
li { margin-left: 1em; }


/*==================================================================
	2. Allgemeine Styles
==================================================================== */
body { 
  background-color: #8c8c8c; 
  color: white; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: small;  
}
h1 { font-size: 150%; } 
h2 { font-size: 130%; }

address {
  text-align: center;   
  font-size: 80%;      
  font-style: normal;  
  letter-spacing: 2px; 
  line-height: 1.5;   
}
a {   
  text-decoration: none; 
  /* outline: none; */ /* nur wenn es echt stört */
}
a:link { color: #d90000; } 
a:visited { color: #cc6666; }
a:hover, 
a:focus { 
  border-bottom: 1px solid #d90000; 
}
a:active { 
  color: white; 
  background-color: #d90000;
}
img#logo {  
  background-color: white;
  color: black;
  padding: 10px solid #000;
  border: 10px solid #d9d9d9;
}
  
  
/*==================================================================
	3. Styles für die Layoutbereiche
==================================================================== */
div#wrapper { 
  background-color: white; 
  color: black; 
  width: 720px;
  margin-top: 10px;
  margin-right: auto;  
  margin-bottom: 10px;
  margin-left: auto; 
}
#kopfbereich {
  background: #ffe574 url(../images/farbverlauf.jpg) repeat-y top left;
  color: black;
  padding: 10px 20px 0 20px;
}
	p#slogan span{
		color: #d90000;
	}
	p#slogan {
		padding: 0px 0 5px 0;
		margin-bottom: 0;
	}

#navibereich { 
	background: #ffe574 url(../images/farbverlauf.jpg) repeat-y left top;
	padding: 5px 10px 5px 10px; 
	border-bottom: 1px solid #8c8c8c;
	color: black;
	text-align: right;
}
  #navibereich ul { margin-bottom: 0; }
  #navibereich li { 
    display: inline;      
    list-style-type: none;
    margin: 0;    
  }
  #navibereich a { 
  	color: black;
	background-color: #ffeda0;
	padding: 4px 8px 0px 8px;
	 }
  #navibereich li.sie-sind-hier a { 
    color: black; 
    background-color: white; 
    border-bottom-color: white; 
   } 
  #navibereich a:hover,
  #navibereich a:focus { 
    color: white; 
    background-color: white; 
  } 
  #navibereich a:active { 
    color: black; 
    background-color: white; 
    border-bottom-color: white; 
  }
  
#textbereich { 
  padding: 20px 20px 20px 20px ;
}
	#textbereich a { 
 			border-bottom: 1px dotted #cc0000; 
	}
	#textbereich a:hover,
	#textbereich a:focus { 
    		border-bottom: 1px solid #d90000; 
	}
	
div#fussbereich {
	padding: 10px 20px 20px 20px;
 	 border-top: 1px solid #8c8c8c;  
 	 margin-top: 0; 
}

/*==================================================================
	4. Sonstige Styles
==================================================================== */



/*==================================================================
	Ende des Stylesheets
==================================================================== */

Ich finde nicht heraus wie ich die graue linie unterhalb des navibereichs entfernen kann damit der rollover effekt entsteht, so dass der register gegen unten geöffnet ist und der rest der linie bleibt.

[BloodyRogue]

hab den fehler selber gefunden danke