Position relativ füllt nicht bis zum rand


#1
Hallo,

wenn ich mein div container mit position:relative positioniere habe ich immer einen kleinen aussenabstand. Wie einen rahmen.
Ist das immer so, bei "relative" oder muss man da noch was angeben??
so als wenn ich margin-left:5px; angeben würde.
 

basti1012

Erfahrenes Mitglied
#2
ne das ist eigentlich nicht so. Kannst du mal einen Link geben oder deinen Code ? Ich denke mal das du da irgendwo einen padding hast oder sonst was, aber das kann man erst genau sagen wenn man das sehen tut
 
#3
Hier meine html:

HTML:
<!DOCTYPE html>
<html>
      <head>
         <title>Schwarzmeerregion</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
         <link rel="stylesheet" type="text/css"  href="css/style.css" />
      </head>
      
      <body>
          <header>
          <div id="logo"></div>
          </header>
          
          <div id="content">
              content
          </div>
          
          <footer>
          </footer>
    </body>
</html>
und hier die CSS dazu:

CSS:
body {
font-family: 'Poppins', sans-serif;
background: url(../images/background.png) no-repeat;
}
/*head_bereich*/
header {
    background-color: #000000;
    position: relative;
    top: -5;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px;
}
#logo {
    position: relative;
    background:url(../images/head.png) center no-repeat;
    height: 100px;
}
/*content_bereich*/
#content {
    position: relative;
    background-color: aqua;
    opacity: 0.5;
    top: 0;
    left:0px;
    width: 100%;
    height: 800px;
}

/* media queries mobile*/
@media only screen and (max-width:480px) {
    header {
        
    }
}   

/* media queries tablet*/
@media only screen and (min-width:481px) and (max-width:800px) {
    header {
        
    }
}

/* media queries HD*/
@media only screen and (min-width:801px) and (max-width:1280px) {
    header {
        
    }
}
Habe mal einen screenshot der seite angehängt, damit man es besser sehen kann.
 

Anhänge

basti1012

Erfahrenes Mitglied
#4
gebe mal in deiner Css ganz oben das mit ein
Code:
*{
  margin:0;
  padding:0;
}
Ich weiß ja nicht was du da genau vor hast ,doch deine ganze positions angaben brauch man eigentlich nicht.Das kann man auch anders regeln. Deine positions angaben könnten dir später noch probleme machen.
 
#5
gebe mal in deiner Css ganz oben das mit ein
Code:
*{
  margin:0;
  padding:0;
}
Ich weiß ja nicht was du da genau vor hast ,doch deine ganze positions angaben brauch man eigentlich nicht.Das kann man auch anders regeln. Deine positions angaben könnten dir später noch probleme machen.
Super, das wars.
Hatte margin und padding direkt in meinem header tag drinne. Das war der Fehler.
Wollte das die container sich alle an das Elternelement richten. Und ohne position angabe hat es auch geklappt.

Vielen dank