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

Xamarin.iOS Cant Deploy on Iphone

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } -1 I have a windows laptop and a mac mini my problem is that It wont deploy on iphone if I use Visual Studio Xamarin on windows to install my app, but it works fine with Visual Studio For Mac. Here's what I get after build succeded on Visual Studio Xamarin on windows : 1>------ Build started: Project: FinalCustomerApp.iOS, Configuration: Debug iPhone ------ 1> Connecting to Mac server 192.168.8.100... 1> FinalCustomerApp.iOS -> C:UsersJeremy PaulDesktopFinalCustomerAppFinalCustomerAppFinalCustomerApp.iOSbiniPhoneDebugFinalCustomerApp.iOS.exe 1> Detected signing identity: 1> Code Signing Key: &quo
Read more

Glorious Revolution

Image
"The Bloodless Revolution" redirects here. For a history of the vegetarian movement, see The Bloodless Revolution (book). This article is about the English revolution of 1688. For the revolution of 1868 in Spain, see Glorious Revolution (Spain). For other uses, see Glorious Revolution (disambiguation). Glorious Revolution The Prince of Orange lands at Torbay Date 1688–1689 Location British Isles Also known as Revolution of 1688 War of the English Succession Bloodless Revolution Participants English, Welsh and Scottish society, Dutch forces Outcome Replacement of James II by William III and Mary II Jacobite rising of 1689 Williamite War in Ireland War with France; England and Scotland join Grand Alliance Drafting of the Bill of Rights 1689 Part of a series on the History of England Timeline Prehistoric Britain Roman Britain Sub-Roman Britain Medieval period Economy in the Middle Ages Anglo-Saxon period
Read more

Dulmage-Mendelsohn matrix decomposition in Python

Image
0 Matlab has a function called dmperm that computes the so-called Dulmage–Mendelsohn decomposition of a n x n matrix. From wikipedia, the Dulmage–Mendelsohn is a partition of the vertices of a bipartite graph into subsets, with the property that two adjacent vertices belong to the same subset if and only if they are paired with each other in a perfect matching of the graph. Looking both on scipy and numpy, I could not find this function, nor some similar version. Is it possible to implement it using basic linear algebra operations? Any idea if this is implemented in some Python package? python matlab linear-algebra graph-theory matrix-decomposition share | improve this question
Read more