我的一个div被幻影顶部填充困扰，似乎忽略了我的css文件 [英] One of my divs is haunted by a phantom top padding, seemingly ignoring my css file
本文介绍了我的一个div被幻影顶部填充困扰，似乎忽略了我的css文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
过去两天，我一直在开发一个非常简单的导航栏，里面只有几个按钮，其中一个应该显示一个下拉菜单.我已经为所有填充设置了％，并且大多数情况下都可以使用，除了div包含显示下拉菜单的按钮之外.
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>
如您所见，.dropdown div(或其中的按钮)行为异常，而不是像我指定的 everywhere 那样具有％填充，它仅填充px填充在顶部，随着屏幕变小或放大，尺寸会增大.
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.
推荐答案
解释起来有些棘手，但基本上是由于按钮没有作为a元素浮动而存在，并且存在默认的line-height定义行框的高度，当字体大小变小时，行框的高度会变大.因此，相位填充是line-height定义的线框的高度.
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>
或减小line-height并调整vertical-align到顶部:
/* 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>
这篇关于我的一个div被幻影顶部填充困扰，似乎忽略了我的css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
