CSS div，边距移动所有内容
下面是一个简单页面的代码。我试图有（A）在顶部的横幅，其中包括一个标志，一个标题到它的权利，然后是一个“登录/注册”链接，（B）下面所有这些，然后我将有网站的主要文本 我想在正文和顶部的横幅之间有一个很大的差距。所以我用div来划分页面。但当我对#main应用“页边空白顶部”以使横幅保持一定距离时，所有内容，即主文本和横幅中的所有内容都会向下移动。如果我对header元素应用“marginbottom”，也会发生同样的情况 我对CSS和HTML有点陌生，但在这之前我认为我已经掌握了窍门。我已经为这个挠头很久了，但我似乎根本不理解这里的定位CSS div，边距移动所有内容,css,html,margin,Css,Html,Margin,下面是一个简单页面的代码。我试图有（A）在顶部的横幅，其中包括一个标志，一个标题到它的权利，然后是一个“登录/注册”链接，（B）下面所有这些，然后我将有网站的主要文本 我想在正文和顶部的横幅之间有一个很大的差距。所以我用div来划分页面。但当我对#main应用“页边空白顶部”以使横幅保持一定距离时，所有内容，即主文本和横幅中的所有内容都会向下移动。如果我对header元素应用“marginbottom”，也会发生同样的情况 我对CSS和HTML有点陌生，但在这之前我认为我已经掌握了窍门。我已经为
您只需要将元素包装在它们自己的容器中，以便更好地定位它们。你可能还想在这本书中定义一些高度。包括桅杆顶部的高度 假设您需要响应性设计：
<header id="masthead" role="banner">
<section class="logo">
<img src="jep.jpeg" alt="My Page">
</section>
<section class="title">
<h2>Journal of Electronic Publishing</h2>
</section>
<section class="sign-in">
<a href="dummy.html">Sign in</a> <a href="dummy.html">Register</a>
</section>
</header>
.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}
电子出版杂志
.标志{
宽度：30%；
浮动：左；
保证金权利：5%；
框大小：边框框；
}
.头衔{
宽度：30%；
浮动：左；
保证金权利：5%；
框大小：边框框；
}
.登录{
宽度：30%；
浮动：左；
右边距：0；
框大小：边框框；
}
编辑：现在我可以看到您的CSS了，您的具体问题是position:absolute；的使用；。删除这些应该会使您走上正确的道路。我建议使用表格布局。有些人不赞成使用1行表格进行样式设置，但这似乎是可行的： HTML: 编辑：使用
div问题是所有的
绝对定位都会从文档流中删除元素。这意味着您的标题高度为0px，但所有内容仍相对于它定位
给你的桅杆一个高度
用于为我们制作一个实体模型。你能发布style.css的内容吗？我应该不在这里使用吗？我仍然有同样的问题。如果我在#main中添加上边距以在页眉和主文本之间留出间隙，那么页面上的所有内容都会向下移动，而不仅仅是#main。为什么？你的问题是所有的立场：绝对；东西你应该考虑重新设计这个没有你的位置：绝对。在这种情况下绝对没有理由使用它们。（对不起，我忍不住要说双关语）这很有效，谢谢！为什么边距现在向下移动#干管，同时保持桌子在原来的位置。我到底做错了什么？使用position:absolute
引起了一些怪癖。没有必要在这种情况下使用它。在这种情况下，您也可以使用div，而不是table。通常，除非需要显示表格数据，否则应避免结构布局的表格。我尝试过DIV，但这只会给我带来我所概述的麻烦，即当我不想移动时，东西会移动。如果没有表格，我怎么能达到同样的效果呢，没有任何东西移动？@user2119522你是想回应另一个答案吗？此解决方案不使用表或更改原始问题中代码中元素的位置。
#masthead {
position: relative;
}
#masthead img {
position: absolute;
}
#masthead h2 {
position: absolute;
left: 150px;
}
#masthead p {
position: absolute;
right: 10px;
}
#main {
margin-top: 40px;
}
<header id="masthead" role="banner">
<section class="logo">
<img src="jep.jpeg" alt="My Page">
</section>
<section class="title">
<h2>Journal of Electronic Publishing</h2>
</section>
<section class="sign-in">
<a href="dummy.html">Sign in</a> <a href="dummy.html">Register</a>
</section>
</header>
.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}
<body>
<header id="masthead" role="banner">
<table>
<tr>
<td><img src="jep.jpeg" alt="My Page"></td>
<td><h2>Welcome!</h2></td>
<td><p><a href="dummy.html">Sign in</a> <a href="dummy.html">Register</a></p></td>
</tr>
</table>
</header>
<div id="main" role="main">
<p>Testing</p>
</div>
</body>
</html>
#masthead {
width: 100%;
}
#masthead table {
width: 100%;
}
#main {
margin-top: 40px;
}
<body>
<header>
<div class="col">
<div class="content">
<img src="jep.jpeg" alt="My Page">
</div>
<div class="content">
<h2>Welcome!</h2>
</div>
<div class="content">
<p><a href="dummy.html">Sign in</a> <a href="dummy.html">Register</a></p>
</div>
</div>
</header>
<div id="main" role="main">
Testing
</div>
</body>
</html>
header {
width: 100%;
}
.col {
height: 100px;
position: relative;
}
.content {
float: left;
width: 33.3%;
}
#main {
margin-top: 50px;
}