Why include display:inline-block?

#1

why does the anchors move down only when the display is set to inline-block, while creating the navigation bar of coffee shop?

.coffee-nav{
	float: right;
	height: 100%;
}

.coffee-nav a{
	color: white;
	padding-right: 12px;
	font-size: 15px;
	font-weight: 700;
	font-family: "Helvetica Neue", sans-serif;
	padding-top: 12%;
	display: inline-block;
}

image
image1363×103 7.14 KB

When not using inline-block

#2

Hi @rishav_201900071 ,
<a> tags/anchors/links are by default inline elements, and by default inline elements do not consider the padding and height properties. That’s why we set their display property to inline-block. inline-blocks render on the same line, but they respect the padding and height property.

Do let me know if you need any other help.

#3

Thank you…This cleared my doubt

1 Like