Rimuovere i margini dell'header

**GamingAlex** · 13-02-2017, 00:14

Ciao a tutti, ho un problema con CSS, praticamente vorrei creare un header stile applicazione, ossia senza bordi e "appiccicato" all'alto della pagina. Ho provato con tutto ma stranamente non funziona, ecco il mio CSS

codice:

* {
    outline:none;
    ;
}
body {
	background-image: url(../images/ktm.jpg);   
    width:100%;
    margin:0;
    background-attachment:fixed;
    background-position:center;
 
}




    
    button {
    background-color:orange;
    border: none;
    padding: 25px 40px;
    color: Black;
	font-family: Arial Black;
	cursor: pointer;
	border-radius: 2px;
	transition-duration: 0.4s;
	box-shadow:  -2px 2px 7px  black;
	font-size:150%;
	
    }button:hover{
	background-color: darkorange;
    color: white;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	
	}
	
	button:active{
		transition-duration: 0.05s;
	background-color: orange;
    border-radius: 10%;
    outline:none !important;
	
	
	}
	
	.logo {font-size: 150% ;
	font-family: Lato, sans-serif;
	background-color:	orange;
    color:red;
    font-weight:900;
    position:relative;
    margin: 0;
    text-align: center;
    height: 60px;
   
    
	}
	p {font-family: Arial; font-size: 200%}


	.finale2{font-family: "Arial Black"; font-size: 200%}
	h3 {font-family: Arial Black}
	
	input {
	font-size: 200%;
	background: orange;
	border: none ;
	width: 10%;
	padding: 9px;
	border-radius: 5px;
	font-family: Arial Black;
	color: white;
	transition-duration: 0.1s;
	box-shadow:  -2px 2px 7px black;
	}
    input:hover{
		box-shadow:  -4px 4px 15px  black;
		
	}
	
	input:focus{
		box-shadow:  -5px 5px 7px  black;
        border-radius: 10px;
	}
	
	
	
	
	
	.simbolo {
	font-family: Arial Black;
	font-size: 200%;
	color:black;
    
	
	}
	
    #container {
        margin: 10px;
    }

e HTML:

codice:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MiscelaCalc</title>


    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link type="text/css" href="css/style.css" rel="stylesheet" />






</head>
<body>
    <div id="container">
        <div class="logo">
            <header>
                <p>MISCELA<span style="font-weight:100; color:white">CALC</span></p>
            </header>
        </div>
    <h3>Inserisci qui la quantità di litri:</h3>
    
        <input id="litri" type=number style="width:20%"> <span class="simbolo" style=font-size:300%;>L</span>
   


    <h3>Inserisci ora la percentuale:</h3>
    
        <input id="percentuale" type=number value=2 maxlength=2>	<span class="simbolo" style=font-size:300%;>%</span><br>
        <br>
        


        <button onclick="myFunction()"><b>Clicca Qui</b></button>
        <p id="finale"></p>
        <p id="finale2" class="finale2"></p>


        </div>
        <script src="scripts/script.js"></script>
</body>
</html>

Il risultato infine è questo: https://snag.gy/30H51Z.jpg
E vorrei appunto che l'header fosse senza margini .-.

Grazie a tutti in anticipo ma anche per il vostro tempo

**KillerWorm** · 13-02-2017, 13:30

Ciao, l'elemento header di per sé non ha alcun margine. Il margine sta negli altri elementi; in particolare nel div #container a cui è stato applicato un margine di 10px tutto attorno:

codice:

#container {
    margin: 10px;
}

Anche il paragrafo dentro header possiede dei margini di default (sopra e sotto) che possono influire sulla disposizione dello stesso elemento padre.
In tal caso andrebbero azzerati. Magari sarebbe meglio non usarlo proprio, quel paragrafo, che mi pare inutile in quel caso.

Ad ogni modo, se devi lasciare un elemento fisso in alto alla pagina, potrebbe essere meglio applicargli position:fixed e top:0.
Chiaramente questo toglierà l'elemento dal normale flusso dei contenuti provocando un collasso dello spazio occupato e quindi uno spostamento degli elementi che lo seguono; per cui vanno fatte opportune considerazioni.

Per capire meglio questi meccanismi ti consiglio eventualmente di dare uno sguardo tra i Link utili CSS al cap. 2 sotto la voce Position.

Discussione: Rimuovere i margini dell'header

Strumenti discussione

Ricerca discussione

Visualizza

Rimuovere i margini dell'header

Permessi di invio