Odstęp od góry przy dodaniu listy i display: inline-block;

pytanie zadane 23 września 2019 w HTML i CSS przez santaclous Nowicjusz (160 p.)

Dzień dobry, dobry wieczór.

Nie wiem czemu gdy wstawiam listę i używam display: inline-block; w NAV to robi się odstęp od góry.

Gdy wpisuję sam text jest OK.

nie chcę robić na float:left; i float:right;

Załączam obrazek.

https://zapodaj.net/images/cc6866ccbdf42.jpg

body
	{
	background-color: #2E2E2E;
	}

header
	{
	background-color: #777474;
	
	}

#logo
	{
	background-color: aqua;
	height: 100px;
	display: inline-block;
	}

nav
	{
	background-color: white;
	
	display: inline-block;	
		
	}

nav ul li
{
	display: inline-block;
	
}

komentarz 23 września 2019 przez uki Obywatel (1,340 p.)

Czy możesz wkleić również kod HTML?

komentarz 24 września 2019 przez santaclous Nowicjusz (160 p.)

<!DOCTYPE html>
<html lang="pl-PL">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
		
		<title>Strona WWWW</title>
		
		<link rel="stylesheet" type="text/css" href="style.css"/>
		
	</head>

	<body>

		<header>
			<div id="logo">
			Strona WWW	
			</div>

			
				<nav>
				
				
					<ul>
						<li><a href="#">menu1</a></li>
						<li><a href="#">menu2</a></li>
						<li><a href="#">menu3</a></li>
						<li><a href="#">menu4</a></li>	
					</ul>
					
				</nav>
			
		</header>
	
	<main>
		<article>
			
			
		</article>	
	</main>

	</body>
</html>

2 odpowiedzi

odpowiedź 24 września 2019 przez santaclous Nowicjusz (160 p.)

Na divach też jest to samo.

Wrzucam cały HTML/CSS

<!DOCTYPE html>
<html lang="pl-PL">

	<head>
		<meta charset="utf-8">
		
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
		
		<title>Strona WWWW</title>
		
		<style>
		
			body
				{
				background-color: #2E2E2E;
				}

			#header
				{
				background-color: #777474;

				}

			#logo
				{
				background-color: aqua;
				height: 100px;
				width: 50px;	
				display: inline-block;
				}

			#nav
				{
				background-color: white;

				display: inline-block;	

				}

			#nav ul li
			{
				display: inline-block;

			}
		
		</style>
		
	</head>

	<body>
		<div id="header">
        
            <div id="logo">
            LOGO
            </div>
            
            <div id="nav">
                <ul>
                    <li><a href="#">menu1</a></li>
                    <li><a href="#">menu2</a></li>
                    <li><a href="#">menu3</a></li>
                    <li><a href="#">menu4</a></li>    
                </ul>
            </div>
                            
        </div>	
	<main>
		<article>
			
			
		</article>	
	</main>

	</body>
</html>