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

0

Dzień dobry, dobry wieczór.

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

Gdy wpisuję sam text jest OK.

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

title

<!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>

1

Jakbyś chciał to robić bardziej na czasie to poeksperymentuj z flexem: https://www.w3schools.com/css/css3_flexbox.asp

0

Na razie się zastanawiam czemu tak się dzieje z display:inline-block.

0

Moje zdanie jest odmienne. Dobry webmaster nie musi używać tych technik. Ale musi je znać, bo pewnego dnia może na nie natrafić. I wtedy co powie? Wie pan - ja panu tego nie zrobię, bo ja umiem tylko nowe…

1

Nie jestem pewien, jak dokładnie to działa w każdym przypadku, ale w Twoim najprawdopodobniej chodzi o to, że przeglądarka zostawia miejsce na margines, który jest zdefiniowany domyślnie dla elementu <ul>. Spróbuj dodać następującą regułę CSS – odstępu nie będzie:

#nav ul {
  margin-top: 0;
}

Na mój rozum tekst wszystkich elementów śródliniowych (tj. inline) jest wyrównywany pionowo ("ustawiany w jednej linii"). Ale nie jestem pewien. Nie mam źródła, gdzie by to było opisane bezpośrednio. Możesz zobaczyć następujące źródła:


UPDATE: https://drafts.csswg.org/css2/visuren.html#inline-level


UPDATE2: https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

0

#nav ul {
margin-top: 0;
}

Tak to rozwiązuje problem. Próbowałem margin-top: 0; w #nav a jednak trzeba bezpośrednio listę.

Reset CSS na wstępie też powinien rozwiązać ten problem.

0

Co rozumiesz przez "reset CSS"?

0

Ach, OK. Ciekawe, nie myślałem o owym "resecie" w tak generyczny sposób.

1 użytkowników online, w tym zalogowanych: 0, gości: 1