Need a quick help with display's

HTML-CSS
1

Why if i dont give my anchor’s tag’s display block its padding goes over the navigation’s top right bellow header’s bottom margin? But if i give it display block it fits perfectly inside the navigation’s height. Anchors height is 20px plus its top and bottom padding each being 10 px so 40px altogether which equals navigation’s height of 40px. Im confused for a bit. Any explanation would be appreciated.

Without display block:

Screenshot_2
Screenshot_21517×1058 188 KB
Screenshot_3
Screenshot_31517×1058 186 KB

With display block:

Screenshot_4
Screenshot_41919×1059 185 KB

html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="CSS/style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700,700i&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
	
	<div id="wrapper">
		
		<div id="header">
			
			<div id="logo">
				<img src="Images/logo.png" alt="Lineweb logo">
			</div>
			
			<div id="slogan">
				<p>Lorem ipsum dolor sit.</p>
			</div>
			
		</div><!-- end of header -->
		
		<nav id="nav">
			
			<ul>
				<li><a href="index.html">Home page</a></li>
				<li><a href="info.html">Info</a>
					<ul>
						<li><a href="sub1.html">Sub1</a></li>
						<li><a href="sub2.html">Sub2</a></li>
						<li><a href="sub3.html">Sub3</a></li>
					</ul>
				</li>
				<li><a href="work.html">Work</a>
					<ul>
						<li><a href="sub1.html">Sub1</a></li>
						<li><a href="sub2.html">Sub2</a></li>
						<li><a href="sub3.html">Sub3</a></li>
					</ul>
				</li>
				<li><a href="about.html">About us &amp; contact</a></li>
			</ul>
			
			<div id="social">
				<a href="#"><i class="fab fa-facebook-square"></i></a>
				<a href="#"><i class="fab fa-twitter-square"></i></a>
				<a href="#"><i class="fab fa-linkedin"></i></a>
			</div>
		</nav><!-- end of nav -->
		
		<main id="main">
			
			<h1>Lorem ipsum dolor sit amet.</h1>
			
			<p>Lorem ipsum <a href="#">dolor sit amet, consectetur adipisicing elit</a>. Eligendi quasi reprehenderit quod eveniet sint, quisquam, iure accusantium, placeat hic explicabo doloremque perspiciatis, atque. Quis tempore molestias, ex quia at voluptatibus.</p>
			
			<img src="Images/hero.jpg" alt="">
			
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quaerat mollitia assumenda accusantium amet. Corporis dolor ad veritatis animi minus odio temporibus, cumque modi! Amet est eligendi nesciunt aperiam doloribus.</p>
		
		</main><!-- end of main -->
		
		<aside id="sidebar">
			
			<h2>First</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate et eos recusandae distinctio dolorem voluptatibus a dolore nihil officiis! Nam.</p>
			<h2>Second</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, mollitia?</p>
			
			<h2>About us</h2>
			
			<img src="Images/location.png" alt="Location">
			<p><a href="#">Read more</a></p>
		</aside><!-- end of sidebar -->
		
		<footer id="footer">
			<p>Copyright &copy; Lineweb</p>
		</footer><!-- end of footer -->
		
	</div><!-- end of wrapper -->
</body>
</html>

/* CSS Document */

body {
	margin: 0;
	padding: 0;
	background: #ccc;
	font-family: 'Roboto', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
}

h2 {
	background: rgba(160,160,160,1.00);
	padding: 10px 0 10px 10px;;
	margin-top: 0;
	color: white;
}

#wrapper {
    background: rgba(255,255,255,1.00);
    margin: 20px auto;
    width: 960px;
    padding: 15px;
}

#header {
	background: #C51417;
	margin: 0 0 10px 0;
	padding: 10px;
	overflow: hidden;
}

a:link,
a:visited {
	color: #C51417;
	text-decoration: none;
}

a:hover {
	color:rgba(188,158,54,1.00);
	text-decoration: underline;
}

a:active {
	color: rgba(186,192,84,1.00);
}

#logo {
	float: left;
}

#slogan {
	float: right;
}

#nav {
	height: 40px;
	background: #333;
	margin: 0 0 10px 0;
	clear: both;
}

#main {
	width: 700px;
	float: left;
	margin: 0 0 10px 0;
}


#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#nav ul li {
	display: inline-block;
	position: relative;
	text-decoration: none;
}

#nav ul li a {
	padding: 10px 8px;
	line-height: 20px;
	color: white;
	height: 20px;
	display: block;
}

#social ul li a:hover {
	background: red;
}

#nav ul li ul {
	background: rgba(136,136,136,0.9);
	position: absolute;
	top: 40px;
	width: 100px;
}

/*#nav ul li ul {
	margin-top: 0;
}*/

#nav ul li:hover ul {
	display: block;
}

#nav ul li ul li {
	display: block;
}

#social {
	float: right;
	font-size: 22px;
	padding: 4px 10px 0 0;
}



#sidebar {
	width: 240px;
	float: right;
	margin: 0 0 10px 0;
}

#footer {
	height: 40px;
	background: #333;
	clear: both;
}
2

Inline elements cannot have height set, and a elements are inline unless you set them to some other display value.

3

Ok i get that but why does upper padding go over navigation?

4

It’s either the float declaration or the position attribute, both of which change the normal document flow. The anchor element (without block applied) has no height so it looks like it’s confusing the browser. I’m not 100% sure because you have a lot of things going on there, your CSS is complex and somewhere there are conflicting rules.

1 Like
5

I actually found out why padding is not working on anchors. Its because anchor tags are inline and paddings (up and bottom) wont work on inline elements, so thereforce if i give anchor tag’s display block then paddings will work. Which is kinda stupid, since li’s are given to be inline-blocks, one may ask him self then why isnt anchor working the same way li’s are since anchor tag’s in this case is a child element. But whatever we gotta get used to it. Thanks for your help btw. No it wasnt about floating or position, i did multiple tests on different way’s navigation would work with dropdowns included but i just found out why.

6

Ah, yes, that would be it!