Body nie zaczyna się od samej góry strony

pytanie zadane 24 października 2020 w HTML i CSS przez Bish0p Obywatel (1,940 p.)

Witam,

natrafiłem na dziwną sytuacje w której element body nie zaczyna sie od góry strony, wszytskie marginy zostały ustawione na 0.

2	komentarz 24 października 2020 przez Comandeer Guru (601,590 p.) Proszę wrzucić kod zgodnie z regulaminem.

3 odpowiedzi

odpowiedź 24 października 2020 przez Comandeer Guru (601,590 p.)
wybrane 25 października 2020 przez Bish0p

Najlepsza

Byłoby naprawdę fajnie, gdybyś wstawił kod zgodnie z regulaminem. Te zasady nie są ot tak wymyślone, ale służą m.in. ułatwieniu niesienia pomocy.

Bo z tych screenów nasuwa mi się podejrzenie, że to nie jest margines nadany body, tylko zachodzi tutaj tzw. margin-collapsing i body dostaje margines swojego pierwszego dziecka. Niemniej byłoby to łatwiej stwierdzić, gdybyś PODAŁ KOD ZGODNIE Z REGULAMINEM.

komentarz 25 października 2020 przez Bish0p Obywatel (1,940 p.)

Nie wrzucałem kodu bo to nie jest jeden plik a kilka dodatkowo jeszcze są komponenty co skutkowałoby lawiną kodu której nikt nawet by nie przeczytał raczej chodziło mi o podpowiedź w czym może być problem niż o bezpośrednie znalezienie go.

html,body{
    margin: 0;
    padding: 0;
    background: rgb(255,255,201);
    background: linear-gradient(29deg, rgba(255,255,201,1) 0%, rgba(220,250,247,0.9475140397956058) 100%);
}

#root{
    height: 100%;
    margin: 0;
}


.registration--container{
    width: 50%;
    height: 70%;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
}
/* reszta niezwiązana */

* {
  word-break: keep-all;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

body {
  margin: 0;
  padding: 0;
  font-family: Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ant-list-item-meta-content {
  max-width: 500px;
}
/*reszta niezwiązana */

+ antd.css

html,
body {
  width: 100%;
  height: 100%;
}
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} 
... kilka tysięcy lini

Nie jest to związane z margin-collapsing, żaden z rodziców nie ma ustawionego marginu

*body

*root

komentarz 25 października 2020 przez Comandeer Guru (601,590 p.)

Ale to nie rodzic ma mieć, a potomek. Strzelam, że chodzi o .registration--container (serio, jakbyś wrzucił prostą reprodukcję na CodePen byłoby o wiele łatwiej…). Proof: https://jsfiddle.net/Comandeer/9o0pdeb6/ – przesunięcie jest spowodowane marginesem w .inner.

Najprostszy fix to danie display: flow-root dla #root w Twoim wypadku (albo overflow: hidden).

komentarz 25 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

display: flow-root

Orientujesz się, jak często dla display używa się wartości innych niż popularne/podstawowe: inline, [inline-]block, [inline-]flex, [inline-]grid? Z flow-root spotykam się pierwszy raz. Spojrzałem do MDN i zastanawiam się na ile przydatne są te wszystkie wartości (m.in.: run-in, contents, flow) oprócz tych najczęściej używanych - czy one są użyteczne tylko w nietypowych przypadkach?

1	komentarz 25 października 2020 przez Comandeer Guru (601,590 p.) Nie orientuję się, ale HTTP Archive powinno mieć dane. Niemniej tak: są przydatne raczej w konkretnych sytuacjach (jak np. potrzeba stworzenia czegoś, co zachowuje się jak tabela, ale nią nie jest).

odpowiedź 24 października 2020 przez overcq Pasjonat (21,710 p.)

Na tym obrazku prawie nic nie widać.

A marginesy znacznika html też ustawiłeś na 0? https://jsfiddle.net/1ckpw4zq/

komentarz 24 października 2020 przez techno16 Gaduła (4,780 p.)

Po kilkukrotnym zoomie stwierdzam, że nie dał.

Mniej więcej tak to powinno wyglądać:

html, body {
margin:0px;
padding:0px;
}

komentarz 24 października 2020 przez Bish0p Obywatel (1,940 p.)

Macie racje że nie widać, poniżej wstawie lepszej jakości zdjęcia, natomiast margin i padding były ustawione na 0 wiec nie w tym leży pies pogrzebany. Jeżeli chodzi o body,html i root to nic z nimi nie robi, zmieniać może je jeszcze biblioteka antd z której importuje style, chociaż nic sie nie zminiło jak wywaliłem ją

Body i root są obniżone w stosunku do html

1	komentarz 24 października 2020 przez overcq Pasjonat (21,710 p.) Zobacz na karcie Computed, jakie są marginesy i co je zmienia.

komentarz 25 października 2020 przez Bish0p Obywatel (1,940 p.)

Sprawdzałem, wyżej wrzuciłem screeny, marginesy są ustawione na zero, po prostu tak jakby body i root mają offset kilkudziesięciu pixeli w dół

odpowiedź 24 października 2020 przez Pooki Obywatel (1,500 p.)

Spróbuj może dodać coś takiego:

#someID{
position: absolute;
top: 0%;
margin: 0 0 0 0;
}

komentarz 25 października 2020 przez Bish0p Obywatel (1,940 p.)

Sprawdzałem tą metodę, akurat w stosunku do okna rejestracji czy logowania sie sprawdzi, bo jest tu jeden formularz natomiast w takim dashboardzie gdzie będę wyświetlał listę elementów to już nie przejdzie bo antd, ustawia mi height na 100%, jak ustawie position na fixed lub absolute mogę wyświetlać tylko viewport a wszystko co jest poniżej już będzie niewidoczne.

Dodatkowo wolałbym uniknąć tej metody bo ona nie rozwiązuje żadnego z problemów tylko na sztywno to naprawia co jest trochę "barbarzyńskie" xD