One of my divs is haunted by a phantom top padding, seemingly ignoring my css file












1















I've been working on a very simple navbar for the last two days, just a with a few buttons inside, one of which is supposed to show a dropdown menu. I've set all my paddings with % and for the most part they work, except for the div containing the button that shows the dropdown menu.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

	background-color: #101010;

}

header h1 {

	color: #ffffff;

	margin: 0px;

	text-align: center;

	font-family: "Barlow Condensed";

	font-size: 7vw;

	padding: 1%;

}

body {

	margin: 0px;

	background-color: #f0f0f0

}

ul, ol { 

	list-style-type: none;

	margin: 0;

	padding: 0;

	overflow: hidden;

}

content {

	width: 100%;

	clear: both;

}

nav {

	background-color: #999999;

	overflow: hidden;

	font-family: "Barlow condensed";

	outline: none;

	border: 0px;

}



.dropdown:hover, .dropbtn {

	background-color: red;

}



/* This contains the dropdown */

.dropdown {

	float: left;

	overflow: hidden;

	padding: 1.5%;

}



/* This is the button */

.dropdown .dropbtn {

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0%;

}



/* Dropdown contents */

.dropdown-content {

	display: none;

	position: absolute;

	background-color: #f1f1f1;

	min-width: 10%;

	overflow: auto;

	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

	z-index: 1;

	margin-top: 1.5%;

	margin-left: -1.5%;

}



/* links inside the dropdown */

.dropdown-content a {

	color: black;

    text-decoration: none;

    display: block;

	float: none;

	font-size: 1.1vw;

	padding: 2%;

}



/* background color for links inside the dropdown (hover) */

.dropdown-content a:hover { 

background-color: #ddd;

}



/* shows the dropdown on hover */

.dropdown:hover .dropdown-content {

	display: block;

}

/* Other buttons in the nav bar, working as intended. */

.botons {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons a {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons:hover {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: red;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

	}

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" href="estil-index.css">

		<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>

		<link rel="icon" type="image/png" href="logo.png"

		<meta charset="UTF-8">

		<meta name="viewport" content="widht=devide-width, initial-scale=1">

	</head>

	<body>

		<header><h1>Big header text</h1></header>

		<content>

			<nav>

				<button class="botons"><a href="#">Home</a></button>

				 <div class="dropdown">

					<button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

				</div>

				<button class="botons"><a href="#">Regular button</a></button>

				<button class="botons"><a href="#">Button</a></button>

				<button class="botons"><a href="#">Button</a></button>

			</nav>

	</body>





As you can see, the .dropdown div (or maybe the button inside) is behaving erratically and instead of having a % padding like I specified everywhere, it sems to have a px padding, only on top, that grows in size as the screen becomes smaller or if zoomed in.



I've sent the code to several peers and friends who are as stumped as I am, especially by the fact that the phantom padding only appears on the top side.






html css







share|improve this question























  • add line-height: 0; to that button

    – Temani Afif
    Nov 15 '18 at 0:23











  • Giving a line-height:0 inside the dropdown class in css fixes it for me. Don't ask me why though :)

    – Gurtej Singh
    Nov 15 '18 at 0:23
















1















I've been working on a very simple navbar for the last two days, just a with a few buttons inside, one of which is supposed to show a dropdown menu. I've set all my paddings with % and for the most part they work, except for the div containing the button that shows the dropdown menu.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

	background-color: #101010;

}

header h1 {

	color: #ffffff;

	margin: 0px;

	text-align: center;

	font-family: "Barlow Condensed";

	font-size: 7vw;

	padding: 1%;

}

body {

	margin: 0px;

	background-color: #f0f0f0

}

ul, ol { 

	list-style-type: none;

	margin: 0;

	padding: 0;

	overflow: hidden;

}

content {

	width: 100%;

	clear: both;

}

nav {

	background-color: #999999;

	overflow: hidden;

	font-family: "Barlow condensed";

	outline: none;

	border: 0px;

}



.dropdown:hover, .dropbtn {

	background-color: red;

}



/* This contains the dropdown */

.dropdown {

	float: left;

	overflow: hidden;

	padding: 1.5%;

}



/* This is the button */

.dropdown .dropbtn {

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0%;

}



/* Dropdown contents */

.dropdown-content {

	display: none;

	position: absolute;

	background-color: #f1f1f1;

	min-width: 10%;

	overflow: auto;

	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

	z-index: 1;

	margin-top: 1.5%;

	margin-left: -1.5%;

}



/* links inside the dropdown */

.dropdown-content a {

	color: black;

    text-decoration: none;

    display: block;

	float: none;

	font-size: 1.1vw;

	padding: 2%;

}



/* background color for links inside the dropdown (hover) */

.dropdown-content a:hover { 

background-color: #ddd;

}



/* shows the dropdown on hover */

.dropdown:hover .dropdown-content {

	display: block;

}

/* Other buttons in the nav bar, working as intended. */

.botons {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons a {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons:hover {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: red;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

	}

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" href="estil-index.css">

		<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>

		<link rel="icon" type="image/png" href="logo.png"

		<meta charset="UTF-8">

		<meta name="viewport" content="widht=devide-width, initial-scale=1">

	</head>

	<body>

		<header><h1>Big header text</h1></header>

		<content>

			<nav>

				<button class="botons"><a href="#">Home</a></button>

				 <div class="dropdown">

					<button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

				</div>

				<button class="botons"><a href="#">Regular button</a></button>

				<button class="botons"><a href="#">Button</a></button>

				<button class="botons"><a href="#">Button</a></button>

			</nav>

	</body>





As you can see, the .dropdown div (or maybe the button inside) is behaving erratically and instead of having a % padding like I specified everywhere, it sems to have a px padding, only on top, that grows in size as the screen becomes smaller or if zoomed in.



I've sent the code to several peers and friends who are as stumped as I am, especially by the fact that the phantom padding only appears on the top side.






html css







share|improve this question























  • add line-height: 0; to that button

    – Temani Afif
    Nov 15 '18 at 0:23











  • Giving a line-height:0 inside the dropdown class in css fixes it for me. Don't ask me why though :)

    – Gurtej Singh
    Nov 15 '18 at 0:23














1












1








1








I've been working on a very simple navbar for the last two days, just a with a few buttons inside, one of which is supposed to show a dropdown menu. I've set all my paddings with % and for the most part they work, except for the div containing the button that shows the dropdown menu.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

	background-color: #101010;

}

header h1 {

	color: #ffffff;

	margin: 0px;

	text-align: center;

	font-family: "Barlow Condensed";

	font-size: 7vw;

	padding: 1%;

}

body {

	margin: 0px;

	background-color: #f0f0f0

}

ul, ol { 

	list-style-type: none;

	margin: 0;

	padding: 0;

	overflow: hidden;

}

content {

	width: 100%;

	clear: both;

}

nav {

	background-color: #999999;

	overflow: hidden;

	font-family: "Barlow condensed";

	outline: none;

	border: 0px;

}



.dropdown:hover, .dropbtn {

	background-color: red;

}



/* This contains the dropdown */

.dropdown {

	float: left;

	overflow: hidden;

	padding: 1.5%;

}



/* This is the button */

.dropdown .dropbtn {

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0%;

}



/* Dropdown contents */

.dropdown-content {

	display: none;

	position: absolute;

	background-color: #f1f1f1;

	min-width: 10%;

	overflow: auto;

	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

	z-index: 1;

	margin-top: 1.5%;

	margin-left: -1.5%;

}



/* links inside the dropdown */

.dropdown-content a {

	color: black;

    text-decoration: none;

    display: block;

	float: none;

	font-size: 1.1vw;

	padding: 2%;

}



/* background color for links inside the dropdown (hover) */

.dropdown-content a:hover { 

background-color: #ddd;

}



/* shows the dropdown on hover */

.dropdown:hover .dropdown-content {

	display: block;

}

/* Other buttons in the nav bar, working as intended. */

.botons {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons a {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons:hover {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: red;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

	}

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" href="estil-index.css">

		<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>

		<link rel="icon" type="image/png" href="logo.png"

		<meta charset="UTF-8">

		<meta name="viewport" content="widht=devide-width, initial-scale=1">

	</head>

	<body>

		<header><h1>Big header text</h1></header>

		<content>

			<nav>

				<button class="botons"><a href="#">Home</a></button>

				 <div class="dropdown">

					<button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

				</div>

				<button class="botons"><a href="#">Regular button</a></button>

				<button class="botons"><a href="#">Button</a></button>

				<button class="botons"><a href="#">Button</a></button>

			</nav>

	</body>





As you can see, the .dropdown div (or maybe the button inside) is behaving erratically and instead of having a % padding like I specified everywhere, it sems to have a px padding, only on top, that grows in size as the screen becomes smaller or if zoomed in.



I've sent the code to several peers and friends who are as stumped as I am, especially by the fact that the phantom padding only appears on the top side.






html css







share|improve this question














I've been working on a very simple navbar for the last two days, just a with a few buttons inside, one of which is supposed to show a dropdown menu. I've set all my paddings with % and for the most part they work, except for the div containing the button that shows the dropdown menu.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

	background-color: #101010;

}

header h1 {

	color: #ffffff;

	margin: 0px;

	text-align: center;

	font-family: "Barlow Condensed";

	font-size: 7vw;

	padding: 1%;

}

body {

	margin: 0px;

	background-color: #f0f0f0

}

ul, ol { 

	list-style-type: none;

	margin: 0;

	padding: 0;

	overflow: hidden;

}

content {

	width: 100%;

	clear: both;

}

nav {

	background-color: #999999;

	overflow: hidden;

	font-family: "Barlow condensed";

	outline: none;

	border: 0px;

}



.dropdown:hover, .dropbtn {

	background-color: red;

}



/* This contains the dropdown */

.dropdown {

	float: left;

	overflow: hidden;

	padding: 1.5%;

}



/* This is the button */

.dropdown .dropbtn {

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0%;

}



/* Dropdown contents */

.dropdown-content {

	display: none;

	position: absolute;

	background-color: #f1f1f1;

	min-width: 10%;

	overflow: auto;

	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

	z-index: 1;

	margin-top: 1.5%;

	margin-left: -1.5%;

}



/* links inside the dropdown */

.dropdown-content a {

	color: black;

    text-decoration: none;

    display: block;

	float: none;

	font-size: 1.1vw;

	padding: 2%;

}



/* background color for links inside the dropdown (hover) */

.dropdown-content a:hover { 

background-color: #ddd;

}



/* shows the dropdown on hover */

.dropdown:hover .dropdown-content {

	display: block;

}

/* Other buttons in the nav bar, working as intended. */

.botons {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons a {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons:hover {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: red;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

	}

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" href="estil-index.css">

		<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>

		<link rel="icon" type="image/png" href="logo.png"

		<meta charset="UTF-8">

		<meta name="viewport" content="widht=devide-width, initial-scale=1">

	</head>

	<body>

		<header><h1>Big header text</h1></header>

		<content>

			<nav>

				<button class="botons"><a href="#">Home</a></button>

				 <div class="dropdown">

					<button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

				</div>

				<button class="botons"><a href="#">Regular button</a></button>

				<button class="botons"><a href="#">Button</a></button>

				<button class="botons"><a href="#">Button</a></button>

			</nav>

	</body>





As you can see, the .dropdown div (or maybe the button inside) is behaving erratically and instead of having a % padding like I specified everywhere, it sems to have a px padding, only on top, that grows in size as the screen becomes smaller or if zoomed in.



I've sent the code to several peers and friends who are as stumped as I am, especially by the fact that the phantom padding only appears on the top side. 






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

	background-color: #101010;

}

header h1 {

	color: #ffffff;

	margin: 0px;

	text-align: center;

	font-family: "Barlow Condensed";

	font-size: 7vw;

	padding: 1%;

}

body {

	margin: 0px;

	background-color: #f0f0f0

}

ul, ol { 

	list-style-type: none;

	margin: 0;

	padding: 0;

	overflow: hidden;

}

content {

	width: 100%;

	clear: both;

}

nav {

	background-color: #999999;

	overflow: hidden;

	font-family: "Barlow condensed";

	outline: none;

	border: 0px;

}



.dropdown:hover, .dropbtn {

	background-color: red;

}



/* This contains the dropdown */

.dropdown {

	float: left;

	overflow: hidden;

	padding: 1.5%;

}



/* This is the button */

.dropdown .dropbtn {

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0%;

}



/* Dropdown contents */

.dropdown-content {

	display: none;

	position: absolute;

	background-color: #f1f1f1;

	min-width: 10%;

	overflow: auto;

	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

	z-index: 1;

	margin-top: 1.5%;

	margin-left: -1.5%;

}



/* links inside the dropdown */

.dropdown-content a {

	color: black;

    text-decoration: none;

    display: block;

	float: none;

	font-size: 1.1vw;

	padding: 2%;

}



/* background color for links inside the dropdown (hover) */

.dropdown-content a:hover { 

background-color: #ddd;

}



/* shows the dropdown on hover */

.dropdown:hover .dropdown-content {

	display: block;

}

/* Other buttons in the nav bar, working as intended. */

.botons {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons a {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons:hover {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: red;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

	}

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" href="estil-index.css">

		<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>

		<link rel="icon" type="image/png" href="logo.png"

		<meta charset="UTF-8">

		<meta name="viewport" content="widht=devide-width, initial-scale=1">

	</head>

	<body>

		<header><h1>Big header text</h1></header>

		<content>

			<nav>

				<button class="botons"><a href="#">Home</a></button>

				 <div class="dropdown">

					<button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

				</div>

				<button class="botons"><a href="#">Regular button</a></button>

				<button class="botons"><a href="#">Button</a></button>

				<button class="botons"><a href="#">Button</a></button>

			</nav>

	</body>





/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

	background-color: #101010;

}

header h1 {

	color: #ffffff;

	margin: 0px;

	text-align: center;

	font-family: "Barlow Condensed";

	font-size: 7vw;

	padding: 1%;

}

body {

	margin: 0px;

	background-color: #f0f0f0

}

ul, ol { 

	list-style-type: none;

	margin: 0;

	padding: 0;

	overflow: hidden;

}

content {

	width: 100%;

	clear: both;

}

nav {

	background-color: #999999;

	overflow: hidden;

	font-family: "Barlow condensed";

	outline: none;

	border: 0px;

}



.dropdown:hover, .dropbtn {

	background-color: red;

}



/* This contains the dropdown */

.dropdown {

	float: left;

	overflow: hidden;

	padding: 1.5%;

}



/* This is the button */

.dropdown .dropbtn {

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0%;

}



/* Dropdown contents */

.dropdown-content {

	display: none;

	position: absolute;

	background-color: #f1f1f1;

	min-width: 10%;

	overflow: auto;

	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

	z-index: 1;

	margin-top: 1.5%;

	margin-left: -1.5%;

}



/* links inside the dropdown */

.dropdown-content a {

	color: black;

    text-decoration: none;

    display: block;

	float: none;

	font-size: 1.1vw;

	padding: 2%;

}



/* background color for links inside the dropdown (hover) */

.dropdown-content a:hover { 

background-color: #ddd;

}



/* shows the dropdown on hover */

.dropdown:hover .dropdown-content {

	display: block;

}

/* Other buttons in the nav bar, working as intended. */

.botons {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons a {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    background-color: inherit;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

}

.botons:hover {

	float: left;

	font-size: 1.2vw;

	border-style: none;

	border-width: 0px;

    outline: none;

    color: white;

    padding: 1.5%;

    background-color: red;

    font-family: inherit;

    margin: 0;

	text-decoration: none;

	}

<!DOCTYPE html>

<html>

	<head>

		<link rel="stylesheet" href="estil-index.css">

		<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>

		<link rel="icon" type="image/png" href="logo.png"

		<meta charset="UTF-8">

		<meta name="viewport" content="widht=devide-width, initial-scale=1">

	</head>

	<body>

		<header><h1>Big header text</h1></header>

		<content>

			<nav>

				<button class="botons"><a href="#">Home</a></button>

				 <div class="dropdown">

					<button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

				</div>

				<button class="botons"><a href="#">Regular button</a></button>

				<button class="botons"><a href="#">Button</a></button>

				<button class="botons"><a href="#">Button</a></button>

			</nav>

	</body>





html css




html css






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 15 '18 at 0:11









AnpocaAnpoca

84




84













  • add line-height: 0; to that button

    – Temani Afif
    Nov 15 '18 at 0:23











  • Giving a line-height:0 inside the dropdown class in css fixes it for me. Don't ask me why though :)

    – Gurtej Singh
    Nov 15 '18 at 0:23



















  • add line-height: 0; to that button

    – Temani Afif
    Nov 15 '18 at 0:23











  • Giving a line-height:0 inside the dropdown class in css fixes it for me. Don't ask me why though :)

    – Gurtej Singh
    Nov 15 '18 at 0:23

















add line-height: 0; to that button

– Temani Afif
Nov 15 '18 at 0:23





add line-height: 0; to that button

– Temani Afif
Nov 15 '18 at 0:23













Giving a line-height:0 inside the dropdown class in css fixes it for me. Don't ask me why though :)

– Gurtej Singh
Nov 15 '18 at 0:23





Giving a line-height:0 inside the dropdown class in css fixes it for me. Don't ask me why though :)

– Gurtej Singh
Nov 15 '18 at 0:23












1 Answer
1






active

oldest

votes


















1














A bit tricky to explain but basically it's due to the fact the button is not made float as the a elements and there is the default line-height that define the height of the line box which will be bigger when the font-size get smaller. So the phatom padding is the height of the line box defined by the line-height.



An easy fix it to make the button floating like the links thus it will be a block level element and no more an inline level element.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  float: left;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>





Or reduce the line-height and adjust vertical-align to top:






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

  line-height: 0;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  vertical-align:top;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>

  </nav>








share|improve this answer





















  • 1





    That more or less nails it, I think. Another alternative would be to move the font-size:1.2vw from the button to its div container, and set the line-height of the button to inherit, so that the line-height of the div's strut stays the same as that of the buttons.

    – Alohci
    Nov 15 '18 at 2:16











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310655%2fone-of-my-divs-is-haunted-by-a-phantom-top-padding-seemingly-ignoring-my-css-fi%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














A bit tricky to explain but basically it's due to the fact the button is not made float as the a elements and there is the default line-height that define the height of the line box which will be bigger when the font-size get smaller. So the phatom padding is the height of the line box defined by the line-height.



An easy fix it to make the button floating like the links thus it will be a block level element and no more an inline level element.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  float: left;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>





Or reduce the line-height and adjust vertical-align to top:






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

  line-height: 0;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  vertical-align:top;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>

  </nav>








share|improve this answer





















  • 1





    That more or less nails it, I think. Another alternative would be to move the font-size:1.2vw from the button to its div container, and set the line-height of the button to inherit, so that the line-height of the div's strut stays the same as that of the buttons.

    – Alohci
    Nov 15 '18 at 2:16
















1














A bit tricky to explain but basically it's due to the fact the button is not made float as the a elements and there is the default line-height that define the height of the line box which will be bigger when the font-size get smaller. So the phatom padding is the height of the line box defined by the line-height.



An easy fix it to make the button floating like the links thus it will be a block level element and no more an inline level element.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  float: left;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>





Or reduce the line-height and adjust vertical-align to top:






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

  line-height: 0;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  vertical-align:top;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>

  </nav>








share|improve this answer





















  • 1





    That more or less nails it, I think. Another alternative would be to move the font-size:1.2vw from the button to its div container, and set the line-height of the button to inherit, so that the line-height of the div's strut stays the same as that of the buttons.

    – Alohci
    Nov 15 '18 at 2:16














1












1








1







A bit tricky to explain but basically it's due to the fact the button is not made float as the a elements and there is the default line-height that define the height of the line box which will be bigger when the font-size get smaller. So the phatom padding is the height of the line box defined by the line-height.



An easy fix it to make the button floating like the links thus it will be a block level element and no more an inline level element.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  float: left;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>





Or reduce the line-height and adjust vertical-align to top:






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

  line-height: 0;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  vertical-align:top;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>

  </nav>








share|improve this answer















A bit tricky to explain but basically it's due to the fact the button is not made float as the a elements and there is the default line-height that define the height of the line box which will be bigger when the font-size get smaller. So the phatom padding is the height of the line box defined by the line-height.



An easy fix it to make the button floating like the links thus it will be a block level element and no more an inline level element.






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  float: left;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>





Or reduce the line-height and adjust vertical-align to top:






/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

  line-height: 0;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  vertical-align:top;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>

  </nav>








/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  float: left;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>





/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  float: left;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>





/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

  line-height: 0;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  vertical-align:top;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>

  </nav>





/* all fonts are using vw units as it makes it easier to spot the phantom top-padding */



header {

  background-color: #101010;

}



header h1 {

  color: #ffffff;

  margin: 0px;

  text-align: center;

  font-family: "Barlow Condensed";

  font-size: 7vw;

  padding: 1%;

}



body {

  margin: 0px;

  background-color: #f0f0f0

}



ul,

ol {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



content {

  width: 100%;

  clear: both;

}



nav {

  background-color: #999999;

  overflow: hidden;

  font-family: "Barlow condensed";

  outline: none;

  border: 0px;

}



.dropdown:hover,

.dropbtn {

  background-color: red;

}





/* This contains the dropdown */



.dropdown {

  float: left;

  overflow: hidden;

  padding: 1.5%;

  line-height: 0;

}





/* This is the button */



.dropdown .dropbtn {

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0%;

  vertical-align:top;

}





/* Dropdown contents */



.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 10%;

  overflow: auto;

  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  z-index: 1;

  margin-top: 1.5%;

  margin-left: -1.5%;

}





/* links inside the dropdown */



.dropdown-content a {

  color: black;

  text-decoration: none;

  display: block;

  float: none;

  font-size: 1.1vw;

  padding: 2%;

}





/* background color for links inside the dropdown (hover) */



.dropdown-content a:hover {

  background-color: #ddd;

}





/* shows the dropdown on hover */



.dropdown:hover .dropdown-content {

  display: block;

}





/* Other buttons in the nav bar, working as intended. */



.botons {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons a {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}



.botons:hover {

  float: left;

  font-size: 1.2vw;

  border-style: none;

  border-width: 0px;

  outline: none;

  color: white;

  padding: 1.5%;

  background-color: red;

  font-family: inherit;

  margin: 0;

  text-decoration: none;

}

<link href='https://fonts.googleapis.com/css?family=Barlow Condensed' rel='stylesheet'>



<header>

  <h1>Big header text</h1>

</header>

<content>

  <nav>

    <button class="botons"><a href="#">Home</a></button>

    <div class="dropdown">

      <button class="dropbtn">Dropdown

					<div class="dropdown-content">

						<a href="#">Link 1</a>

						<a href="#">Link 2</a>

						<a href="#">Link 3</a>

						<a href="#">Link 4</a>

						</div>

					</button>

    </div>

    <button class="botons"><a href="#">Regular button</a></button>

    <button class="botons"><a href="#">Button</a></button>

    <button class="botons"><a href="#">Button</a></button>

  </nav>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 15 '18 at 0:34

























answered Nov 15 '18 at 0:29









Temani AfifTemani Afif

75k94386




75k94386








  • 1





    That more or less nails it, I think. Another alternative would be to move the font-size:1.2vw from the button to its div container, and set the line-height of the button to inherit, so that the line-height of the div's strut stays the same as that of the buttons.

    – Alohci
    Nov 15 '18 at 2:16














  • 1





    That more or less nails it, I think. Another alternative would be to move the font-size:1.2vw from the button to its div container, and set the line-height of the button to inherit, so that the line-height of the div's strut stays the same as that of the buttons.

    – Alohci
    Nov 15 '18 at 2:16








1




1





That more or less nails it, I think. Another alternative would be to move the font-size:1.2vw from the button to its div container, and set the line-height of the button to inherit, so that the line-height of the div's strut stays the same as that of the buttons.

– Alohci
Nov 15 '18 at 2:16





That more or less nails it, I think. Another alternative would be to move the font-size:1.2vw from the button to its div container, and set the line-height of the button to inherit, so that the line-height of the div's strut stays the same as that of the buttons.

– Alohci
Nov 15 '18 at 2:16




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310655%2fone-of-my-divs-is-haunted-by-a-phantom-top-padding-seemingly-ignoring-my-css-fi%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Bressuire

Image
Subprefecture and commune in Nouvelle-Aquitaine, France Bressuire Subprefecture and commune Chateau de Bressuire and the Eglise Notre-Dame Coat of arms Location of Bressuire Bressuire Show map of France Bressuire Show map of Nouvelle-Aquitaine Coordinates: 46°50′27″N 0°29′14″W  /  46.8408°N 0.4872°W  / 46.8408; -0.4872 Coordinates: 46°50′27″N 0°29′14″W  /  46.8408°N 0.4872°W  / 46.8408; -0.4872 Country France Region Nouvelle-Aquitaine Department Deux-Sèvres Arrondissement Bressuire Canton Bressuire Government  • Mayor .mw-parser-output .nobold{font-weight:normal} (2014–20) Jean Michel Bernier Area 1 180.59 km 2 (69.73 sq mi) Population (2014) 2 19,300  • Density 110/km 2 (280/sq mi) Time zone UTC+01:00 (CET)  • Summer (DST) UTC+02:00 (CEST) INSEE/Postal code 79049 /79300 Elevation 98–236 m (322–774 ft) (avg. 173 m or 568 ft) 1 French Land Register data, which exclude
Read more

Vorschmack

Image
Vorschmack Ukrainian Jewish-style vorschmack served on rye bread Course Hors d'oeuvre Region or state Eastern Europe Associated national cuisine Ashkenazi Jewish, Finnish, German, Ukrainian, Polish, Russian Main ingredients Ground meat and/or fish Cookbook: Vorschmack   Media: Vorschmack Vorschmack or forshmak (Yiddish: פֿאָרשמאַק ‎, from archaic German Vorschmack , "foretaste" [1] or "appetizer" [2] ) is an originally East European dish made of salty minced fish or meat. Different variants of this dish are especially common in Ashkenazi Jewish and Finnish cuisine. Some varieties are also known in Russian and Polish cuisine. Contents 1 In Jewish cuisine 2 In Russian cuisine 3 In Polish cuisine 4 In Finnish cuisine 5 See also 6 References In Jewish cuisine According to Gil Marks, the German name points to the possible Germanic origin of this dish. [1] William Pokhlyobkin descr
Read more

Quarantine

Image
For other uses, see Quarantine (disambiguation). Signal flag "Lima" called the "Yellow Jack" which when flown in harbor means ship is under quarantine. A simple yellow flag (also called the "Yellow Jack") had historically been used to signal quarantine (it stands for Q among signal flags), but now indicates the opposite, as a signal of a ship free of disease that requests boarding and inspection. A quarantine is used to separate and restrict the movement of people; it is 'a restraint upon the activities or communication of persons or the transport of goods designed to prevent the spread of disease or pests', for a certain period of time. [1] This is often used in connection to disease and illness, such as those who may possibly have been exposed to a communicable disease. [2] The term is often erroneously used to mean medical isolation, which is "to separate ill persons who have a communicable disease from those who are healthy
Read more