Div używanie marginesów ujemnych

0

Mam pytanie, odnośnie mojego diva, główny div - "god" jest jakby tłem, i teraz moje pytanie skoro margin w klasnie god jest ustawiony na 0 to dlaczego od góry strony jest odstęp, rozwiązaniem jest margin ujemny, ale mnie zastanawia dlaczego tam jest odstęp skoro margin to 0? i przy wartości 0 powinno nie być odstępu
Pytanie numer 2:
Czy stosowamie marginów ujemnych to jakiś błąd? bo tak rozwiązałem problem aby 3 elementy klasy "row" były koło siebie

margin-left:70px;
margin-right: -40px;

<!DOCTYPE html>
<html>
<head>
	<title>Bartek Page</title>
	<meta charset="utf-8">
<style>
    
    .main{
    }
    .row{
        float: left;
        width: 25.33%;
        background-color: azure;
        margin-left:70px;
        margin-right: -40px;
    }
    h1{
        clear: left;
    }
    #god{
        min-height: 900px;
        margin: 0 50px;
     //margin: -20px 50px; ##rozwiazanie
        background-color: white;
    }
    body{
        margin: 0;
        background-color: darkgrey;
    }
</style>
</head>
<body>
<div id="god">
    <h1>Hello</h1>
    
    <div class="main">
        <div class="row">
        <h2>Hello</h2>
            <p>Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.</p>
        </div>
        <div class="row">
             <h2>Hello</h2>
            <p>Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.</p>
        </div>
        <div class="row">
             <h2>Hello</h2>
            <p>Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.</p>
        </div>
    </div>
    <h1>Hello again</h1>

</div>
</body>
</html>
0

dasz rade wstawić ten kod na jakiś edytor online typu https://jsfiddle.net/ albo https://jsbin.com/?html,css,output ?

0

Zbadaj w przeglądarce powinno Ci pomóc z tym marginesem, osobiście polecam na start css reset np. z tej strony: https://meyerweb.com/eric/tools/css/reset/

Jak chcesz 3 elementy koło siebie to może użyj css-grid?

.row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
1

Jak w 2018 widze że w kodzie jest float left to nie szlak trafia . Teraz są abo flexboxy albo gridy . NIE UŻYWAJ FLOAT W CSS

0

no dobra, ale powie mi ktoś dlaczego body się zaczyna 20 px od początku strony?

0

4p.jpg

1

Sam ten margines ustawiłeś.
https://imgur.com/a/UrWQo

// jak tu cholera się stawia te obrazki? -.-

dla h1 margin i padding na 0

jakbyś przebadał to to byś widział, że h1 ma wewnętrzne marginesy

https://imgur.com/a/ft1F6 <-- patrz tu

1

Margin z h1 "Hello" Ci bierze.

0

Rzeczywiście, bo nie mógł się pomieścić, w klasie main i wypchał poza nią

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