CSS边距重叠而不是给出距离[重复]

2023-12-28

最近我遇到了边距问题,但我无法解决它。 我的 HTML 看起来像这样:

<div class="info-box">Some text</div>
<div class="form">...</div>

CSS:

.info-box{
    border-radius: 5px;
    border: 1px solid red;
    margin-bottom: 20px;
}

.form{
    margin-top: 20px;
}

问题是边距相互重叠,而不是两个元素之间的距离为 40px。

我的问题是:为什么?我发现添加到 .info-box Overflow:hidden 修复了这个问题,但也许有更好的方法?


再次强调 - 您必须了解边距的解释方式。边距指的是另一个元素的位置不包括它的边距。您不能对保证金求和。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS边距重叠而不是给出距离[重复] 的相关文章

  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 当鼠标悬停在链接上时,如何在链接旁边创建弹出框?

    这是我想要实现的 我的网页上显示了两个超链接 a href http foo com foo a a href http bar com bar a 我还有两个对 div 链接的描述 div foo means foo div div ba
  • 设置overflow-y可见,而overflow-x为auto,以便内容可以垂直溢出父容器

    我在用着position absolute and position relative如果将其父级悬停在图像上 则在图像上显示文本 文本和图像父 div 所在的容器设置为overflow x auto 使其具有水平滚动条 我想要看起来垂直溢
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • 如何用Python抓取动态网页

    我正在努力做什么 抓取下面的网页以获取二手车数据 Issue 刮掉整个页面 在上面的 url 中 仅显示前 30 项 这些可以通过我在下面编写的代码来抓取 其他页面的链接显示为 1 2 3 但链接地址似乎是用 Javascript 编写的
  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 使用 PHP 获取 2 个同名 HTML 输入标签的值

    假设我有下表
  • HTML5 有效的命名空间标签前缀

    验证我的页面时 W3 Validator 会给我一个错误
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 为什么字体扩展仅适用于 PDF,而不适用于其他格式(HTML、XLS、DOC)?

    通过 Jaspersoft Studio 我们使用以下设置将用于 Web 应用程序的内置 Windows Calibri 字体变体导出到字体扩展 JAR 中 导出的jrfontextensions jar内的目录结构如下 jrfontext
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行

随机推荐

  • 将坐标转换为城市名称?

    如何使用 MapKit 从坐标获取地址 我有这个代码 当长按地图时它会获取坐标 func didLongPressMap sender UILongPressGestureRecognizer if sender state UIGestu
  • 尝试同时编译多个 CUDA 文件时出现链接错误 LNK2005

    我有一个 CUDA 程序 可以正常工作 但目前全部写在一个文件中 我想将这个大文件分成几个较小的文件 以便更容易维护和导航 新的结构是 foo cuh foo cu bar cuh bar cu main cu The cuh头文件包含结构
  • 我想在 Yup 中转换值,但 Formik 没有返回正确的值

    我在表单 电子邮件 中有一个值 我想将其转换为小写 我在 Yup 中有一个转换正在工作 但 Formik 没有显示小写值 如何才能使当我以大写形式输入电子邮件时 它会自动转换为小写形式 这是我的代码 import React from re
  • 无法终止 SPID“事务回滚正在进行中”

    我的数据库中有一条处于永久回滚模式的未提交语句 当我尝试终止与此语句关联的 SPID 时 出现以下错误 事务回滚正在进行中 预计回滚完成 0 预计剩余时间 0 秒 此未提交的语句导致用户无法查看数据库的表 视图和过程树 如何停止这个 SPI
  • 在运行时加载 MP3 文件

    我正在尝试使用在运行时加载 mp3 文件WWW http docs unity3d com ScriptReference WWW htmlUnity中提供的类 我没有收到任何错误 但在处理歌曲后我无法播放音乐 我到处都找过了 但找不到任何
  • 在构造函数中设置变量数组的最小大小

    因此 我的编程教授希望我编写一个 Kingdom 类 其变量名至少有 12 个字符长 通常情况下 如果最小 12 个字符的不变量被破坏 人们只需使用 String 名称变量和错误消息来实现此类 就像 Java 中的这样 import jav
  • 马尔可夫链聊天机器人如何工作?

    我正在考虑使用马尔可夫链之类的东西创建一个聊天机器人 但我不完全确定如何让它工作 据我了解 您可以根据给定单词和后面的单词的数据创建一个表格 在训练机器人时是否可以附加任何类型的概率或计数器 这是个好主意吗 问题的第二部分是关键字 假设我已
  • lldb:异常断点(相当于gdb的catch throw)

    我正在尝试使用 lldb 进行 C 调试 如果抛出异常 我想停止 就像 gdb 的那样catch throw 并且我在 lldb 文档中找不到等效项 Use breakpoint set E c 打破所有异常并且breakpoint set
  • 将 JScrollPane 添加到 JLabel

    我似乎不知道如何添加JScrollPane to a JLabel The JLabel我正在使用的是一个长格式的 HTML 字符串 请帮忙 area new JLabel JScrollPane scroller new JScrollP
  • 如何运行指向 jar 的 TestNG 测试

    我有一个 Jar文件包含在 TestNG 测试上运行所需的文件 我想在该 Jar 文件中运行特定的 xml 文件 我的要求是是否可以执行指向 Jar文件如果是的话我该怎么做 您可以使用 xmlpathinjar suites GroupBa
  • 如何确定谁更改了文件?

    在 Windows 中 如何以编程方式确定上次更改或删除文件的用户帐户 我知道设置对象访问审核可能是一个选项 但如果我使用它 我就会遇到尝试将审核日志条目与特定文件匹配的问题 听起来复杂而混乱 我想不出任何其他方法 那么有人对这种方法或任何
  • 如何获取 PowerShell 字符串中最后一次出现的字符的索引?

    我想从 PowerShell 中的以下字符串获取最后一个 出现的索引 以便修剪 Activity 单词并保留它 string C cmb Trops TAX Auto Activity 我正在将代码从 VBScript 转换为 PowerS
  • 从 IEnumerable 中的任意点访问一系列元素

    我有这个方法 private IEnumerable
  • Laravel Jobs 不允许序列化“Closure”

    我想将数据发送到 NewsletterStore 作业 但它因以下错误而失败 有什么建议么 我还尝试删除 SerializesModels Models 特征 没有任何成功 Error Exception Serialization of
  • 如何在 Julia 中逐行读取文件?

    如何打开文本文件并逐行读取它 我对两种不同情况的答案感兴趣 一次获取数组中的所有行 一次处理每一行 对于第二种情况 我不想一次将所有行保留在内存中 将文件作为行数组一次性读入内存只需调用readlines功能 julia gt words
  • ASP.NET Core MVC 2.0 中基于路径的身份验证

    在 ASP NET Core MVC 1 1 中 我们有基于路径的身份验证 如下所示 public void Configure IApplicationBuilder app IHostingEnvironment env ILogger
  • 为什么 git-for-each-ref 无法正确排序标签?

    当我有一个包含轻量级标签和带注释标签的存储库时 git for each ref似乎只对其中一组进行排序 我想修改我的通话for each ref获得对所有标签进行排序并将它们混合在输出中的输出 例如 bash 3 2 git tag gt
  • C 反转字符串函数得到奇怪的输出

    我试图理解指针并制作一个反向字符串函数 code include
  • 批量:将txt文件中的文件复制到一个文件夹中

    我正在尝试创建一个批处理文件 将文本文件中列出的多个文件复制到新文件夹中 我发现了几个与此相关的线程 但我仍然无法使批处理正常工作 我遇到的问题是txt中列出的文件都位于不同的源位置并且具有不同的扩展名 例如 该列表如下 C Users F
  • CSS边距重叠而不是给出距离[重复]

    这个问题在这里已经有答案了 最近我遇到了边距问题 但我无法解决它 我的 HTML 看起来像这样 div class info box Some text div div class form div CSS info box border