Małe odstępy pomiędzy krawędzią strony a div'em

Odpowiedz Nowy wątek
2019-01-10 20:16
0

Cześć, mam problem z małymi odstępami pomiędzy "krawędzią okna"(? jeśli można to tak nazwać) a div'em.
Dokładnie chodzi o lewą i górną stronę. Chciałbym się dowiedzieć dlaczego one powstały i jak się ich pozbyć.

W załączniku wysyłam zrzut ekranu jak to wygląda.

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Templete</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
</head>
<body>
 
<div class="left">
  <h1>Lorem Ipsum</h1>
  <h2>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
     consectetur, adipisci velit...</h2>
 
</div>
 
<div class="right">
  <p><center>Log in</center></p>
  </div>
 
</body>
</html>
 
html
{
  margin: 0;
  padding: 0;
  width: 100%;
 
}
 
body
{
  background: url("https://i.imgur.com/BD4e0Hm.jpg") 50% 50% fixed;
  background-size: cover;
 
}
 
h1
{
  color: white;
  font-family: 'Didact Gothic', sans-serif;
  text-align: center;
  font-size: 9vh;
  margin-bottom: auto;
}
 
h2
{
 
  color: white;
  font-family: 'Arimo', sans-serif;
  text-align: center;
  font-size: 3vh;
  margin-bottom: auto;
}
 
.left
{
  position: absolute;
  width: 65%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
 
.right
{
  position: absolute;
  margin-left: 65%;
  width: 35%;
  height: 100%;
  background-color: rgba(0,0,0, 0.6);
}
 
  • ewq.PNG (1,76 MB) - ściągnięć: 10
edytowany 1x, ostatnio: jeff, 2019-01-10 20:17

Pozostało 580 znaków

2019-01-10 21:10

body ma domyślny, systemowy margines 8px,
nadpisz go:

body {
 ...
  margin: 0;  
}

No i używaj konsoli przeglądarki, żeby zobaczyć, co jest czym, jakie posiada finalnie wyliczone parametry i gdzie trzeba poprawić.


edytowany 1x, ostatnio: Freja Draco, 2019-01-10 21:12

Pozostało 580 znaków

2019-01-10 21:15
0

Dziękuje za pomoc.

Pozostało 580 znaków

2019-01-10 21:17
2019-01-10 21:20
1

Żeby uniknąć takich różnych nietypowych zachowań, dobrze jest sobie zrobić na początku tzw. CSS-reset.

Przykładowe dwa linki - https://meyerweb.com/eric/tools/css/reset/ LUB/ORAZ https://cssreset.com/scripts/eric-meyer-reset-css/.


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0