Html 保证金崩盘导致一个Div移动。_Html_Border_Margin_Collapse

Html 保证金崩盘导致一个Div移动。

html

Html 保证金崩盘导致一个Div移动。,html,border,margin,collapse,Html,Border,Margin,Collapse,我正在研究HTML，我认为这是一个利润崩溃的问题。当我从css中的Div#body中取出行“border:solid black 1px；”时，它会导致Div#header在页面上下降约20%。我不明白它为什么这样做，或者如何修复它。我尝试过使body Div border为0px，它也做了同样的事情。如果我把body Div全部取出来，它也会做同样的事情 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-

我正在研究HTML，我认为这是一个利润崩溃的问题。当我从css中的Div#body中取出行“border:solid black 1px；”时，它会导致Div#header在页面上下降约20%。我不明白它为什么这样做，或者如何修复它。我尝试过使body Div border为0px，它也做了同样的事情。如果我把body Div全部取出来，它也会做同样的事情

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Cast & Crew - Home Page</title>
<style type="text/css"> 

</style>
<link href="css2.css" type="text/css"                        
              rel="stylesheet" />

</head>

<body>
<div id="body">
<div id ="header">
    <span class="float"><img class="img" src = "face2.png" alt="Face mask"></span>
        Cast & Crew Restaurant

    <span class="floatr"><img class="img" src = "face.png" alt="Face mask"></span>


<table id="links">
<tr>
    <th><a href="Home.html"> Home</a></th>
    <th><a href="Menu.html"> Menu</a></th>
    <th><a href="plabout.html">About Us</a></th>
    <th><a href="Contact.html">Contact</a></th>
</tr>
</table>
</div>
<div class ="sidebar">
<table>
    <tr><td><a href="#app">Appetizers</a></td></tr>
    <tr><td><a href="#salad">Salads</a></td></tr>
    <tr><td><a href="#burger">Burgers</a></td></tr>
    <tr><td><a href="#sand">Sandwiches</a></td></tr>
    <tr><td><a href="#pasta">Pasta</a></td></tr>
    <tr><td><a href="#entree">Entrées</a></td></tr>
    <tr><td><a href="#pizza">Pizza</a></td></tr>

</table>
</div>
</div>
</body>
</html>

为#header应用top:0将解决问题

我看不出这是有边框和无边框的samwe…当我在Notepad++中保存文件并在Firefox、IE、Chrome或Safari中运行时，我发现了上面提到的问题。你检查了小提琴了吗？它有用吗？如果是，问题出在其他地方。。。类的浮动在哪里？你确定你共享了整个代码吗？如果您共享的代码无法复制该问题，我们如何解决它？它在fiddle中工作，但在其他任何地方都不工作。类float还不存在，它是为我尚未启动的未来添加而存在的。整个代码已经共享。我不知道为什么它在小提琴上有用，但在实际应用中却不行？您是否在“应用程序”中使用其他样式表或插件？你能把这个问题复制到别的地方吗。。或者提供一个在线链接。？打开开发人员控制台并检查页面，检查是否覆盖了任何样式或添加了其他样式。。

a:link {color:#FFFFFF;}
a:visited {color:#0066FF}
a:hover {color:#3385FF;}
a:focus {color:#B20000;}
a:active {background-color: white; color:black;}

.blankrow{height: 40px !important; 
    }

#body   {height: 1150px; width: 100%;
    border:solid black 2px;}


#header     {position: fixed;
    background:black;
    height: 160px;width: 100%;
    text-align: center;
        font-size:40pt;
        text-shadow:5px 4px 10px #FF0000,-5px -4px 10px #FFFFFF;
        color:#000000;

        }

html        {background-image: url("bg.jpg");
        background-repeat:no-repeat;
        background-position; 50%, 50%;
        background-attachment: fixed;
        min-height:100%;
        background-size:cover;
        color:#FFFFFF;
        }

.img    {width: 50px; height:85px;}

#links  {width:50%; 
    height:50px;
    font-size:22pt;     
    margin:auto;
    text-shadow:0px 0px 0px #000000;
    }

#menu   {height: 3200px;
    width: 900px;

    margin-top:15%;
    margin-left:17%;
    font-size:18pt;}

.sidebar {width: 150px;
    height: 230px;
    position: fixed;
    left: 40px;
    top: 300px;
    font-size:18pt;
    border:solid black 2px;}

.spacer{height: 10px !important; }