Ciao a tutti, vorrei una chiarificazione:
Avendo questo codice html per il tag html
Perché in tutti i browsers il margine sinistro non viene visualizzato mentre negli strumenti per glicodice HTML:{ background-color:gold; width: 100%; height: 100%; padding: 6px; border: solid black 10px; margin-top: 10px; margin-right: 50px; margin-bottom: 10px; margin-left: 20px; }
sviluppatori nel boxmodel c'è il margin-right?
Grazie.
Ciao e benvenuto, noto un po' di confusione nell'articolazione della tua richiesta, per cui cerco di interpretare al meglio ciò che hai indicato.
Parliamo di codice CSS che hai applicato all'elemento <html>, giusto?Originariamente inviata da Troyfu
Meglio specificare il selettore anche nel codice riportato sul forum, così da evitare fraintendimenti.
Se lo stai applicando solo per il tag html avrai una cosa del genere:
codice:html { background-color:gold; width: 100%; height: 100%; padding: 6px; border: solid black 10px; margin-top: 10px; margin-right: 50px; margin-bottom: 10px; margin-left: 20px; }Forse intendi il margine destro, che per l'appunto è margin-right, giusto?
In realtà, escludendo eventuali altre regole CSS che potrebbero sovrascrivere le proprietà qui indicate, nel caso specifico tutti i margini vengono correttamente applicati sull'elemento html, così come sono specificati, anche se a destra e in basso non risultano visibili perché fuoriescono dall'area visibile (viewport).
Ci sarebbero da considerare vari concetti del box-model CSS per i quali viene determinato tale comportamento ma mi limito a fare una panoramica.
I margini, applicati ad un elemento, per loro natura devono comunque "fare i conti" con gli elementi circostanti, che sono parte dello stesso flusso dei contenuti, e col proprio blocco di contenimento (secondo la relazione genitore-figlio), che di solito è l'elemento antenato più prossimo.
Nel caso dell'elemento html la situazione è particolare perché non possiede un elemento genitore manipolabile, essendo lui stesso l'elemento radice. In realtà risiede di fatto in un rettangolo tecnicamente detto blocco di contenimento iniziale, che possiede le dimensioni del viewport.
Tornando alla tua domanda, il fatto è che i margini non sono considerati nel calcolo dell'ingombro di un elemento, quale esso sia. Ora, margin-top e margin-left in questo caso determinano uno "spostamento" (relativo al punto 0, cioè l'angolo in alto a sinistra del contenitore di riferimento), per cui questi risultano visibili all'interno del contenitore, mentre margin-right e margin-bottom, se non ci sono altri elementi circostanti o altri fattori che ne determinano l'apprezzabilità, risultano esterni dal contenitore e in questo caso sono praticamente "tagliati fuori" dall'area visibile.
Questo avviene anche perché stai estendendo la larghezza al 100%, non considerando però lo spazio occupato dai margini.
Se il valore di width fosse auto (valore di default), l'elemento si estenderebbe per lo spazio disponibile per cui il calcolo terrebbe conto anche di quel margin-right.
Ad ogni modo in genere si preferisce evitare di applicare margini direttamente all'elemento html — piuttosto si applicano come reset con un margin:0 per una questione di cross-browsing — è preferibile invece agire sull'elemento body, se serve, o su elementi di blocco preposti a fare da "involucro" dei contenuti, proprio perché in questo modo si ha una relazione genitore-figlio che può essere gestita meglio.
Spero di aver chiarito qualcosa o quantomeno di non averti confuso maggiormente
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando