Html Div标签页边距不工作

设计facebook登录页面只是为了练习使用html和css。但在这里我面临一些问题。不知道它是什么。在这里，我想减少“loginArea”类的顶部边距，但不能这样做。因此facebook徽标是可以的，但登录区域与真正的facebook页面完全不同

正文{
保证金：0；
填充：0；
字体系列：arial；
}
.标志区{
高度：35px；
宽度：100px；
背景：url（media/6cVHHozUQSt.png）不重复；
显示：内联块；
溢出：隐藏；
利润率：40px 40px 0 200px；
}
.主要地区{
最大宽度：1600px；
保证金：自动；
}
页眉。main页眉：在{
内容：“；
显示：块；
明确：两者皆有；
}
header.main标题{
背景：#3a5797；
填充：10px0；
颜色：#fff；
}
.mainHeader.logoArea{
宽度：50%；
浮动：左；
}
.mainHeader.loginArea{
浮动：对；
宽度：50%；
}
.loginArea.userName，
.loginArea.password{
宽度：40%；
浮动：左；
}
.loginArea输入[type=“text”]，
.loginArea输入[type=“password”]{
宽度：60%；
填充：2px；
边框宽度：1px；
边框颜色：#29487d；
边缘底部：5px；
}
.loginArea.提交按钮{
宽度：20%；
浮动：左；
}
.loginArea标签{
字体大小：12px；
}
标签[for=“keepLogin”]，
罗吉纳雷亚酒店{
字体大小：12px；
颜色：#9CABC6；
}
#基普洛金{
保证金：0；
}
.提交按钮输入{
背景：#3B5998；
颜色：#fff；
字体大小：粗体；
边缘顶部：20px；
边框宽度：1px；
边框颜色：#29487d；
填充物：5px；
}

Facebook-登录或注册
电子邮件或电话



让我登录
密码



在.loginArea类中，将顶部边距减少为0，如下所示。希望这对你有帮助

margin: 0 40px 0 200px;

在.loginArea类中，将顶部边距减少为0，如下所示。希望这对你有帮助

margin: 0 40px 0 200px;

将
宽度
或
边距
从
.main header.logoArea
中移除（或缩小），这样就不会占用太多空间

请始终注意，元素实际使用的空间是
高度/宽度
+
填充
+
边距
+
边框
，因此在您的情况下，元素的实际宽度为边距的50%加上240px。
从
.mainHeader.logoArea
中删除
宽度
或
边距
（或减少），这样就不会占用太多空间

请始终注意，元素实际使用的空间是
高度/宽度
+
填充
+
边距
+
边框
，因此在您的情况下，元素的实际宽度是50%加上240px的边距。
您的问题是.logoArea的边距，因此您可以将框大小设置为border box，而不是ma我使用填充物

框大小的默认值为内容框：

这是CSS标准指定的初始值和默认值。测量的宽度和高度属性仅包括内容，而不包括填充、边框或边距。注意：填充、边框和边距将在框外，例如，如果.box{width:350px；}，则应用{border:10px纯黑；}结果{在浏览器中呈现}一盒宽度：370px。
因此，元素的维度计算为：宽度=内容的宽度，高度=内容的高度（不包括边框和填充的值）

因此，有两种方法可以解决您的问题：
1.删除边距
2.将框大小设置为边框框+带填充的交换边距

请检查盒子型号和盒子尺寸以了解更多信息：）


您的问题是.logo区域的边距，因此您可以将框大小设置为border box，并使用填充代替边距

框大小的默认值为内容框：

这是CSS标准指定的初始值和默认值。测量的宽度和高度属性仅包括内容，而不包括填充、边框或边距。注意：填充、边框和边距将在框外，例如，如果.box{width:350px；}则应用{border:10px solid black；}结果{在浏览器中呈现}一个宽度为370px的框。
因此，元素的维度计算为：宽度=内容的宽度，高度=内容的高度（不包括边框和填充的值）

因此，有两种方法可以解决您的问题：
1.删除边距
2.将框大小设置为边框框+带填充的交换边距

请检查盒子型号和盒子尺寸以了解更多信息：）


首先，在榜首

*{
 box-sizing: border-box;
}

然后将.logo区域中的边距更改为padding

.logoArea {
 height: 35px;
 width: 100px;
 background: url(media/6cVHHozUQSt.png) no-repeat;
 display: inline-block;
 overflow: hidden;
 padding: 10px 40px 0 45px;
}

首先，在榜首

*{
 box-sizing: border-box;
}

然后将.logo区域中的边距更改为padding

.logoArea {
 height: 35px;
 width: 100px;
 background: url(media/6cVHHozUQSt.png) no-repeat;
 display: inline-block;
 overflow: hidden;
 padding: 10px 40px 0 45px;
}

我的问题是登录区域上方的高度，而不是宽度。我想降低登录区域上方的高度如果您使用开发人员工具，您将看到徽标框占用了太多的宽度，因此它会强制登录元素进入第二行。尝试删除徽标框的宽度，看看会发生什么。我的问题是登录区域上方的高度，而不是宽度。我想降低登录区域上方的高度如果您使用开发人员工具，您将看到徽标框占用了太多的宽度，因此它会强制登录元素进入第二行。尝试从徽标框中删除宽度，然后看看会发生什么。