How do I remove the margin from the top?

0

I have this HTML code and this CSS code:

	.burua{
		padding: 0px;
		margin: 0px;
		width: 100%;
		background-color:#000000;
		height:65px;
	}
	
	#p1{
		font-size: 350%;
		text-align: center;
	}
	
	a:link{
		text-decoration:none;
		color: #000000;
		
	}
	a:visited{
		color: #000000;
		text-decoration:none;
	}

	#nombreEndi{
		text-align: center;
		margin:0 auto;
		position: relative;
		top: 50%;
		color: #8B0000; 
		font-family: "TituloEndi";
		font-size:40px;
	}

	.header{
		height:100px; width:100%;
		text-align:center;
	}

	.menu{
		height: 40px;
		width:100%;
		margin-top: 0px;
		text-align:center;		
		background-color: #191919;
		background-image: -moz-linear-gradient(top, #191919, #000000);
		background-image: -o-linear-gradient(top, #191919, #000000);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #191919), color-stop(1, #000000));
		background-image: -webkit-linear-gradient(#191919, #000000);
		background-image: linear-gradient(top, #191919, #000000);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#191919', endColorStr='#000000');
		border-top: 1px solid rgba(50, 50, 50, 0.3);
	}
	.wrapper{ height:2000px; 
	   width:100%; 
	   padding-top:20px
	}
	.menu-fixed {
		position:fixed;
		z-index:1000;
		top:0;
		width:100%;
		box-shadow: 2px 2px 5px #999;
	}
	ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		display: inline-block; 
		font-size: 25px;
		width: 100%;
	}

	body{
		margin: 0;
		background-image: url("../ARGAZKIAK/background.png");
		background-attachment: fixed;

	}

	#menu li{
		display: inline-block;
		list-style: none;
	}

	.listaArriba{
		color:  #000000;
		width: 150px;
	}

	#titulua{
			background-color:#000;
			text-align:center;
			margin-left: 300px;
			margin-top: 7px;
	}

	#signUp{
		height:250px;
		position:fixed;
		width: 200px;
		margin-left: 250px;
		margin-top: 100px;
		text-align: center;
		color: white;
	}
	#logIn{
		height:250px;
		position:fixed;
		width: 200px;
		margin-left: 575px;
		margin-top: 70px;
		text-align: center;
		color: white;
	}
	#help{
		height:250px;
		position:fixed;
		width: 200px;
		margin-left: 900px;
		margin-top: 100px;
		text-align: center;
		color: white;
	}
	.argazkia{
		margin-left:10px;
	}
	#azalpena{
		font-size: 35px;
	}
	

	
	#behealdea{
		margin-top:0px;
		height: 30px;
		background-color: #191919;
		background-image: -moz-linear-gradient(top, #191919, #000000);
		background-image: -o-linear-gradient(top, #191919, #000000);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #191919), color-stop(1, #000000));
		background-image: -webkit-linear-gradient(#191919, #000000);
		background-image: linear-gradient(top, #191919, #000000);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#191919', endColorStr='#000000');
		border-top: 1px solid rgba(50, 50, 50, 0.3);
		width: 100%;
		position: fixed;
		bottom: 0;
		text-align: center;
	}
<header class="burua">
    <div class = "cabecera">
			<p id="p1">DiruBank</p>
    </div>
</header>
		<div class="menu" id="menu">
			<nav class="top-menu">
				<ul class = "navigation">
					<li class="listaArriba" id="news"><a href="#">NEWS</a></li>
					<li class="listaArriba" id="conciertos"><a href="#">GIGS</a></li>
					<li class="listaArriba" id="videos"><a href="#">VIDEOS</a></li>
					<li class="listaArriba" id="songs"><a href="#">MUSIC</a> </li>
					<li class="listaArriba" id="lyrics"><a href="#">LYRICS</a></li>
					<li class="listaArriba" id="store"><a href="#">STORE</a></li>
				</ul>
			</nav>
		</div>
	<div id="signUp">
		<img class="argazkia" id="arg1" src="../ARGAZKIAK/signUp.png"/>
		<p id="azalpena">Sign up</p>
	</div>
	
	<div id="logIn">
		<img class="argazkia" id="arg2" src="../ARGAZKIAK/login.png"/>
		<p id="azalpena">Log In</p>
	</div>
	<div id="help">
		<img class="argazkia" id="arg3" src="../ARGAZKIAK/help.png"/>
		<p id="azalpena">Help</p>
	</div>	
	
		<footer id="behealdea">
			<a href="#"> Egileak </a>
		</footer>

And the web looks like this:

What I do not understand is that it generates the gray chunk from the top.
Greetings.

    
asked by Mikel Molinuevo 07.12.2017 в 12:27
source

1 answer

1

The problem is not to set margin to #p1 (which has a font-size: 350%).
Put a margin-top:0 and it will take the space above.
Greetings!

    
answered by 07.12.2017 / 12:46
source