Javascript 节/分区之间的空行

我正在尝试使用下面的HTML和样式构建一个响应性静态网页。我看到边界之间有空行水平方向我不确定它是来自Div还是Section我想删除这些空行，我尝试为我在这个样式中使用的几乎所有元素添加边距：0px和填充：0px没有任何效果。 有人，请帮助我，我做错了什么，我需要在哪里做这个改变，以消除这些白线

需要删除或缩小高亮显示区域的线条，以便更接近每个部分/分区

`

.主接线盒{ 背景：线性-梯度-45度，rgba255，255，255，0.52，rgba255，255，255，0.52； 颜色：黑色； 宽度：1150px； 填充：10px； 保证金：5em自动； -webkit边界半径：15px； -moz边界半径：5px； 边界半径：35px； 盒影：12px 12px 16px 0 rgba10,10,10,0.25，-8px-8px 12px 0 rgba55,55,55,0.3； } .包裹{ 身高：100%； 显示器：flex； 对齐项目：居中； 证明内容：中心； } .按钮{ 最小宽度：50px； 最小高度：50px； 字体系列：“Nunito”，无衬线； 字体大小：20px； 字母间距：1.3px； 字号：700； 颜色：313133； 背景：白色； 边界：无； 边界半径：1000px； 盒影：12px 12px 24px RGBA79209197.64； 过渡：所有0.3秒均为0秒； 光标：指针； 大纲：无； 位置：相对位置； 填充：6px； } 按钮：：之前{ 内容：； 边界半径：1000px； 最小宽度：calc300px+12px； 最小高度：calc50px+12px； 边框：6px纯黑； 盒影：0 0 60px rgba0，255，203，64； 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； 不透明度：0； 转换：所有.3都可以轻松地输入输出0； } .按钮：悬停， .按钮：焦点{ 颜色：313133； 转化：translateY-6px； } 按钮：悬停：：在， 按钮：焦点：：前{ 不透明度：1； } 按钮：：之后{ 内容：； 宽度：30px； 高度：30px； 边界半径：100%； 边框：2个实心00FFCB； 位置：绝对位置； z指数：-1； 最高：50%； 左：50%； 转化：转化-50%，-50%； 动画：环1.5s无限； } 按钮：悬停：：之后， 按钮：focus:：after{ 动画：无； 显示：无； } @关键帧环{ 0% { 宽度：30px； 高度：30px； 不透明度：1； } 100% { 宽度：100px； 高度：100px； 不透明度：0； } } 显示结果{ 背景：线性梯度-45度，rgba0，200，0，0.52，rgba255，255，255，0.52； 颜色：03202C； 宽度：650px； 填充：10px； 保证金：1em自动； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：40px； -网络工具包盒阴影：0px 5px 5px-2px rgba0,0,0,0.5； -moz盒阴影：0px 5px 5px-2px rgba0,0,0,0.5； 盒影：12px 12px 16px 0 rgba20,30,40,50.25，-8px-8px 12px 0 rgba255,205,255,0.3； } /*Div行*/ .集装箱{ 高度：自动； 溢出：隐藏； } .对{ 宽度：420px； 浮动：对； 文本对齐：对齐； 文本缩进：10px高度：10px； 单词包装：打断单词； 保证金：5px； 填充：0px； } 右：悬停：：之后， 右：焦点：：之后{ 光标：指针； 转化：translateY-6px； } .右：悬停， .右：聚焦{ 转化：translateY-6px； } 右：悬停：：之前， 右：焦点：：之前{ 不透明度：1； } 右：悬停：：之后， 右：焦点：：之后{ 动画：无； 显示：无； } 输入[类型=收音机]：未：禁用~标签{ 光标：指针； } 标签{ 显示：块； 边界：无； 边界半径：20px； 填充：10px； 边际：0px； 文本对齐：对齐； 位置：相对位置； 单词包装：打断单词； 左：3%； 光标：指针； 转化：translateY-6px； 边框：2个实心hsla150，75%，50%，1个； } 输入[类型=复选框]：选中+标签{ 背景：白色； 填充：0px； } h1{ 颜色：hsl215，5%，10%； 边缘底部：2rem； } h3{ 颜色：hsla215，5%，10%，1； } 氢{ 颜色：黑色； 字号：18px； 文本对齐：对齐； 边际：0px； 填充：0px； } h5{ 颜色：999； } p{ 字号：60； 顶部：-30px； 左：-10px； 字号：18px； 文本对齐：对齐； 边际：0px； 填充：0px； } 输入[类型=复选框]{ 显示：块； } 输入[类型=复选框]：未：禁用~标签{ 光标：指针； } 输入[类型=复选框]：选中+标签{ 颜色：黑色； } 输入[类型=复选框]：选中+标签：：后{ 颜色：150、75%、45%； 字体系列：“Nunito”，无衬线； 边框：5px实心hsl150,75%，45%； 内容：\2713； 字体大小：24px； 位置：绝对位置； 顶部：-5px； 左：-5px； 转化：translateX-50%； 高度：20px； 宽度：20px； 线高：10px； 文本对齐：居中； 边界半径：50%； } 部分{ 显示器：flex； 柔性流：行换行； 保证金：5px； 填充：0px； } 分区>分区{ 填充：1px； } @仅介质屏幕，最大宽度：700px{ 部分{ 弯曲方向：立柱； } } 纽约 纽约市由5个行政区组成，位于哈德逊河与大西洋交汇处。核心 曼哈顿是世界上主要的商业、金融和文化中心之一，人口稠密

华盛顿特区 美国首都华盛顿是波托马克河沿岸的一座紧凑城市，与马里兰州和弗吉尼亚州接壤。它的定义是宏伟的新古典主义纪念碑和建筑

芝加哥 芝加哥位于伊利诺伊州密歇根湖畔，是美国最大的城市之一，以其大胆的建筑而闻名，它的天际线被摩天大楼点缀，如标志性的约翰·汉考克中心

洛杉矶 洛杉矶是南加州的一座城市，也是美国电影和电视产业的中心。在其标志性的好莱坞标志附近，派拉蒙影业、环球影业和华纳兄弟等工作室提供幕后参观

您可以尝试添加

但不确定它将如何响应。

您可以尝试添加

---

但不确定它将如何响应。这是怎么回事-我将使容器灵活，然后将边框和填充移动到右侧div并移除浮动：

.主接线盒{ 背景：线性-梯度-45度，rgba255，255，255，0.52，rgba255，255，255，0.52； 颜色：黑色； 宽度：1150px； 填充：10px； 保证金：5em自动； -webkit边界半径：15px； -moz边界半径：5px； 边界半径：35px； 盒影：12px 12px 16px 0 rgba10,10,10,0.25，-8px-8px 12px 0 rgba55,55,55,0.3； } .科{ 显示器：flex； 宽度：100%； 柔性包装：包装； } .包裹{ 身高：100%； 显示器：flex； 对齐项目：居中； 证明内容：中心； } .按钮{ 最小宽度：50px； 最小高度：50px； 字体系列：“Nunito”，无衬线； 字体大小：20px； 字母间距：1.3px； 字号：700； 颜色：313133； 背景：白色； 边界：无； 边界半径：1000px； 盒影：12px 12px 24px RGBA79209197.64； 过渡：所有0.3秒均为0秒； 光标：指针； 大纲：无； 位置：相对位置； 填充：6px； } 按钮：：之前{ 内容：； 边界半径：1000px； 最小宽度：calc300px+12px； 最小高度：calc50px+12px； 边框：6px纯黑； 盒影：0 0 60px rgba0，255，203，64； 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； 不透明度：0； 转换：所有.3都可以轻松地输入输出0； } .按钮：悬停， .按钮：焦点{ 颜色：313133； 转化：translateY-6px； } 按钮：悬停：：在， 按钮：焦点：：前{ 不透明度：1； } 按钮：：之后{ 内容：； 宽度：30px； 高度：30px； 边界半径：100%； 边框：2个实心00FFCB； 位置：绝对位置； z指数：-1； 最高：50%； 左：50%； 转化：转化-50%，-50%； 动画：环1.5s无限； } 按钮：悬停：：之后， 按钮：focus:：after{ 动画：无； 显示：无； } @关键帧环{ 0% { 宽度：30px； 高度：30px； 不透明度：1； } 100% { 宽度：100px； 高度：100px； 不透明度：0； } } 显示结果{ 背景：线性梯度-45度，rgba0，200，0，0.52，rgba255，255，255，0.52； 颜色：03202C； 宽度：650px； 填充：10px； 保证金：1em自动； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：40px； -网络工具包盒阴影：0px 5px 5px-2px rgba0,0,0,0.5； -moz盒阴影：0px 5px 5px-2px rgba0,0,0,0.5； 盒影：12px 12px 16px 0 rgba20,30,40,50.25，-8px-8px 12px 0 rgba255,205,255,0.3； } /*Div行*/ .集装箱{ 高度：自动； 溢出：隐藏； } .对{ 宽度：420px； 文本对齐：对齐； 单词包装：打断单词； 保证金：5px； 填充：10px； 边框：2个实心hsla150，75%，50%，1个； 边界半径：20px； } 右：悬停：：之后， 右：焦点：：之后{ 光标：指针； 转化：translateY-6px； } .右：悬停， .右：聚焦{ 转化：translateY-6px； } 右：悬停：：之前， 右：焦点：：之前{ 不透明度：1； } 右：悬停：：之后， 右：焦点：：之后{ 动画：无； 显示：无； } 输入[类型=收音机]：未：禁用~标签{ 光标：指针； } 标签{ 显示：块； 边界：无； 边际：0px； 文本对齐：对齐； 位置：相对位置； 单词包装：打断单词； 光标：指针； } 输入[类型=复选框]：选中+标签{ 背景：白色； 填充：0px； } h1{ 颜色：hsl215，5%，10%； 边缘底部：2rem； } h3{ 颜色：hsla215，5%，10%，1； } 氢{ 颜色：黑色； 字号：18px； 文本对齐：对齐； 边际：0px； 填充：0px； } h5{ 颜色：999； } p{ 字号：60； 顶部：-30px； 左：-10px； 字号：18px； 文本对齐：对齐； 边际：0px； 填充：0px； } 输入[类型=复选框]{ 显示：块； } 输入[类型=复选框]：未：禁用~标签{ 光标：指针； } 输入[类型=复选框]：选中+标签{ 颜色：黑色； } 输入[类型=复选框] ]：选中+标签：：之后{ 颜色：150、75%、45%； 字体系列：“Nunito”，无衬线； 边框：5px实心hsl150,75%，45%； 内容：\2713； 字体大小：24px； 位置：绝对位置； 顶部：-5px； 左：-5px； 转化：translateX-50%； 高度：20px； 宽度：20px； 线高：10px； 文本对齐：居中； 边界半径：50%； } 部分{ 显示器：flex； 柔性流：行换行； 保证金：5px； 填充：0px； } 分区>分区{ 填充：1px； } @仅介质屏幕，最大宽度：700px{ 部分{ 弯曲方向：立柱； } } 纽约 纽约市由5个行政区组成，位于哈德逊河与大西洋交汇处。其核心是曼哈顿，一个人口稠密的自治区，是世界上主要的商业、金融和文化中心之一

华盛顿特区 美国首都华盛顿是波托马克河沿岸的一座紧凑城市，与马里兰州和弗吉尼亚州接壤。它的定义是宏伟的新古典主义纪念碑和建筑

芝加哥 芝加哥位于伊利诺伊州密歇根湖畔，是美国最大的城市之一，以其大胆的建筑而闻名，它的天际线被摩天大楼点缀，如标志性的约翰·汉考克中心

洛杉矶 洛杉矶是南加州的一座城市，也是美国电影和电视产业的中心。在其标志性的好莱坞标志附近，派拉蒙影业、环球影业和华纳兄弟等工作室提供幕后参观

---

这是怎么回事-我将使容器灵活，然后将边框和填充移动到右侧div并移除浮动：

.主接线盒{ 背景：线性-梯度-45度，rgba255，255，255，0.52，rgba255，255，255，0.52； 颜色：黑色； 宽度：1150px； 填充：10px； 保证金：5em自动； -webkit边界半径：15px； -moz边界半径：5px； 边界半径：35px； 盒影：12px 12px 16px 0 rgba10,10,10,0.25，-8px-8px 12px 0 rgba55,55,55,0.3； } .科{ 显示器：flex； 宽度：100%； 柔性包装：包装； } .包裹{ 身高：100%； 显示器：flex； 对齐项目：居中； 证明内容：中心； } .按钮{ 最小宽度：50px； 最小高度：50px； 字体系列：“Nunito”，无衬线； 字体大小：20px； 字母间距：1.3px； 字号：700； 颜色：313133； 背景：白色； 边界：无； 边界半径：1000px； 盒影：12px 12px 24px RGBA79209197.64； 过渡：所有0.3秒均为0秒； 光标：指针； 大纲：无； 位置：相对位置； 填充：6px； } 按钮：：之前{ 内容：； 边界半径：1000px； 最小宽度：calc300px+12px； 最小高度：calc50px+12px； 边框：6px纯黑； 盒影：0 0 60px rgba0，255，203，64； 位置：绝对位置； 最高：50%； 左：50%； 转化：转化-50%，-50%； 不透明度：0； 转换：所有.3都可以轻松地输入输出0； } .按钮：悬停， .按钮：焦点{ 颜色：313133； 转化：translateY-6px； } 按钮：悬停：：在， 按钮：焦点：：前{ 不透明度：1； } 按钮：：之后{ 内容：； 宽度：30px； 高度：30px； 边界半径：100%； 边框：2个实心00FFCB； 位置：绝对位置； z指数：-1； 最高：50%； 左：50%； 转化：转化-50%，-50%； 动画：环1.5s无限； } 按钮：悬停：：之后， 按钮：focus:：after{ 动画：无； 显示：无； } @关键帧环{ 0% { 宽度：30px； 高度：30px； 不透明度：1； } 100% { 宽度：100px； 高度：100px； 不透明度：0； } } 显示结果{ 背景：线性梯度-45度，rgba0，200，0，0.52，rgba255，255，255，0.52； 颜色：03202C； 宽度：650px； 填充：10px； 保证金：1em自动； -webkit边界半径：5px； -moz边界半径：5px； 边界半径：40px； -网络工具包盒阴影：0px 5px 5px-2px rgba0,0,0,0.5； -moz盒阴影：0px 5px 5px-2px rgba0,0,0,0.5； 盒影：12px 12px 16px 0 rgba20,30,40,50.25，-8px-8px 12px 0 rgba255,205,255,0.3； } /*Div行*/ .集装箱{ 高度：自动； 溢出：隐藏； } .对{ 宽度：420px； 文本对齐：对齐； 单词包装：打断单词； 保证金：5px； 填充：10px； 边框：2个实心hsla150，75%，50%，1个； 边界半径：20px； } 右：悬停：：之后， 右：焦点：：之后{ 光标：指针； 转化：translateY-6px； } .右：悬停， .右：聚焦{ 转化：translateY-6px； } 右：悬停：：之前， 右：焦点：：之前{ 不透明度：1； } 右：悬停：：之后， 右：焦点：：之后{ 动画：无； 显示：无； } 输入[类型=收音机]：未：禁用~标签{ 光标：指针； } 标签{ 显示：块； 边界：无； 边际：0px； 文本对齐：对齐； 位置：相对位置； 单词包装：打断单词； 光标：指针； } 输入[类型=复选框]：选中+标签{ 返回 地面：白色； 填充：0px； } h1{ 颜色：hsl215，5%，10%； 边缘底部：2rem； } h3{ 颜色：hsla215，5%，10%，1； } 氢{ 颜色：黑色； 字号：18px； 文本对齐：对齐； 边际：0px； 填充：0px； } h5{ 颜色：999； } p{ 字号：60； 顶部：-30px； 左：-10px； 字号：18px； 文本对齐：对齐； 边际：0px； 填充：0px； } 输入[类型=复选框]{ 显示：块； } 输入[类型=复选框]：未：禁用~标签{ 光标：指针； } 输入[类型=复选框]：选中+标签{ 颜色：黑色； } 输入[类型=复选框]：选中+标签：：后{ 颜色：150、75%、45%； 字体系列：“Nunito”，无衬线； 边框：5px实心hsl150,75%，45%； 内容：\2713； 字体大小：24px； 位置：绝对位置； 顶部：-5px； 左：-5px； 转化：translateX-50%； 高度：20px； 宽度：20px； 线高：10px； 文本对齐：居中； 边界半径：50%； } 部分{ 显示器：flex； 柔性流：行换行； 保证金：5px； 填充：0px； } 分区>分区{ 填充：1px； } @仅介质屏幕，最大宽度：700px{ 部分{ 弯曲方向：立柱； } } 纽约 纽约市由5个行政区组成，位于哈德逊河与大西洋交汇处。其核心是曼哈顿，一个人口稠密的自治区，是世界上主要的商业、金融和文化中心之一

华盛顿特区 美国首都华盛顿是波托马克河沿岸的一座紧凑城市，与马里兰州和弗吉尼亚州接壤。它的定义是宏伟的新古典主义纪念碑和建筑

芝加哥 芝加哥位于伊利诺伊州密歇根湖畔，是美国最大的城市之一，以其大胆的建筑而闻名，它的天际线被摩天大楼点缀，如标志性的约翰·汉考克中心

洛杉矶 洛杉矶是南加州的一座城市，也是美国电影和电视产业的中心。在其标志性的好莱坞标志附近，派拉蒙影业、环球影业和华纳兄弟等工作室提供幕后参观

---

我查过你的密码了。还有一些问题，你可以从中看到修改过的代码

---

我查过你的密码了。还有一些问题，你可以从中看到修改过的代码

---

修改.right和label修复了间距问题

将边框从标签移动到。右侧。 添加填充到。对。 减小.right的宽度以补偿添加的填充和边框。 .对{ 宽度：392px； 文本对齐：对齐； 文本缩进：10px高度：10px； 单词包装：打断单词； 保证金：5px； 填充物：5px； 边界半径：20px； 边框：2个实心hsla150，75%，50%，1个； } 标签{ 显示：块； 边界：无； 文本对齐：对齐； 位置：相对位置； 单词包装：打断单词； 光标：指针； 转化：translateY-6px； }

---

修改.right和label修复了间距问题

将边框从标签移动到。右侧。 添加填充到。对。 减小.right的宽度以补偿添加的填充和边框。 .对{ 宽度：392px； 文本对齐：对齐； 文本缩进：10px高度：10px； 单词包装：打断单词； 保证金：5px； 填充物：5px； 边界半径：20px； 边框：2个实心hsla150，75%，50%，1个； } 标签{ 显示：块； 边界：无； 文本对齐：对齐； 位置：相对位置； 单词包装：打断单词； 光标：指针； 转化：translateY-6px； }

---

在占用额外空间的div顶部有隐藏复选框opacity 0。在占用额外空间的div顶部有隐藏复选框opacity 0。它起作用了。谢谢你的工作。谢谢

input[type="checkbox"] { margin-top: -10px; }

<input type="checkbox" id="cb2" name="cb2" value="cb2" style="display: none">

.main_box {
background: linear-gradient(-45deg, rgba(255, 255, 255,0.52), rgba(255,255,255,0.52));
color: black;
/* width: 1150px; */
padding: 10px;
margin: 5em auto;
-webkit-border-radius: 15px;
-moz-border-radius: 5px;
border-radius: 35px;
box-shadow: 12px 12px 16px 0 rgba(10, 10, 10, 0.25), -8px -8px 12px 0 rgba(55, 55, 55, 
  0.3);
 }