CSS、嵌套 div 和边距与填充

2023-11-30

我完全理解盒子模型。这个问题更多的是试图确定关于何时使用边距和何时使用填充的语义方法。

这是一个典型的例子,

首先,用简单的英语来说:

  • 情况:我们有一个容器div,里面有一个段落元素。
  • 目标:在 div 内部和段落外部之间有 12px 的空间。

  • 选项 a) 对容器 div 应用 12px 的内边距

  • 选项 b) 对段落元素应用 12px 边距

或者,如果您愿意,也可以使用 HTML:

<div id="container">
    <p>Hello World!</p>
</div>

并且,CSS:

选项a)

div#container {padding: 12px;}

选项b)

p {margin: 12px;}

Cheers!

Jon


填充和边距具有相同的效果,除了以下情况(我可能会错过一些):

  1. 你有某种背景属性。利润不会得到他们。
  2. 你有一个边界
  3. 您使用 TD(无保证金)
  4. 两个嵌套项目,边距折叠在一起,而填充则不折叠在一起。
  5. (需要检查这一点)它们可能对元素的宽度和高度产生不同的影响。 (如果有人更了解,请编辑此)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS、嵌套 div 和边距与填充 的相关文章

  • 如何缩放 SVG 路径以适应窗口大小?

    我在缩放 SVG 以适应窗口大小时遇到 了麻烦 在这个例子中 我有一个波浪路径和一个文本元素 我想在这里实现的是沿着波浪路径从左到右移动文本元素 这是由GSAP完成的 并停在路径的中间在初始负载下 当用户开始滚动时 它将移至末尾 我的问题是
  • Bootstrap:列表内联项目符号?

    有人知道如何在 Bootstrap 3 中水平列表中的元素之间添加项目符号 分隔符吗 ul class list inline li Author Michal li li Modified 17 08 2014 li li Comment
  • 如何使div垂直滚动[重复]

    这个问题在这里已经有答案了 我用图片元素列表做了一个水平滚动 但是当我垂直滚动它时我失败了 我的水平滚动条代码是 div class pic container div class pic row div style width 100 a
  • Chrome 和 Safari 错误::不允许加载本地资源: file:///D:/CSS/Style.css

    当我在 chrome 或 safari 中访问我的 aspx 页面时 它在控制台中显示此错误 不允许加载本地资源 file D CSS Style css 在 IE 和 FF 中一切正常 我使用外部 CSS 通过 aspx 页面链接 我已经
  • 如何选择一个元素但排除其子元素

    我明白 div hover not class 作品 但是 如何实现 LI 元素的 悬停 效果 但排除鼠标悬停在LI内的某个 DIV 上时的悬停效果 E G li Hello div Bye div li 我想获得 li 的悬停效果 li
  • 角度材质表-表内边框

    I am using Angular material table and I want to set border inside the table Using CSS I was able to set border Normal ca
  • Ace Editor 自动完成和多种语言

    如何为 Ace 编辑器创建自动完成功能以及如何突出显示 php 中的 html javascript 和 csshttp ace ajax org http ace ajax org
  • Angular 2 + Semantic UI,组件封装打破风格

    我使用 Angular2 和 Semantic UI 作为 CSS 库 我有这段代码 div class ui three stakable cards a class ui card a a class ui card a a class
  • IE8 - 隐藏 div 内的表单,返回键不再起作用

    我有一个登录表单 位于带有 display none 的 div 中 然后我使用 jquery 淡入表单 但 Enter Return 键不再提交表单 如果我将显示更改为阻止 则效果很好 此问题仅存在于 IE 中 有任何想法吗 这是一个不起
  • 将 Bootstrap CSS 中的列表居中[重复]

    这个问题在这里已经有答案了 重复报告后编辑 抱歉 我认为建议的重复项实际上可能是重复项 我先尝试了一下 但它对我不起作用 因此出现了一个新问题 再次查看新的建议答案后 我意识到我的问题可能与我正在使用的工具 codepen io 的开箱即用
  • 为什么我的 CSS 属性被覆盖/忽略?

    我对 CSS 层次结构 有一些问题 不确定将其称为层次结构是否正确 我正在尝试设置以下 HTML 的样式 section section
  • CSS 属性选择器类以以下开头但不等于

    我想将 css 应用于以 abcd 开头的所有类 但我不想将该 css 应用于名称为 abcd dontapply 的类 我可以这样做吗 我尝试过的 a class abcd not class abcd dontapply define
  • 如何使用CSS缩放图像以填充div并保持纵横比?

    我想用一个 div 填充img 保持纵横比并根据需要拉伸宽度或高度以适应 div style width 80px height 80px img src div 我怎样才能实现它 如果图像不是二次方的 则必须将其 放大 并根据哪一侧较大而
  • Bootstrap 4 Beta 0 网格系统上的 Rowspan

    您好 我正在开发一个使用 Bootstrap 4 Beta 的电子商务模板 我让它在移动设备上工作 但在桌面设备上我不知道如何让购买按钮保持在标题下 在我的方法中 它出现在 图库 部分下 Desired Desktop Desired Mo
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元
  • 为什么这些内联块元素会产生额外的宽度?

    这是这个问题的后续内容 仅使用 css 自动调整图像下的文本 https stackoverflow com questions 34185547 autofit text under image with only css 为什么这段代码
  • 为什么我的 Web 组件 CSS 不显示?我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class

随机推荐

  • 我应该使用什么工具或算法从给定 Damerau-Levenshtein 距离的关键字生成单词?

    Damerau Levenshtein 距离是这样的 abcd aacd gt 1 DL distance abcd aadc gt 2 DL distance 有关编辑距离的更多信息 https pypi python org pypi
  • 如何获取所有持久化实体

    我对 lagom 框架完全陌生 因此 我今天正在阅读文档并开始修改他们的 hello world 示例 但是 我无法找到一种方法来获取所有持久实体 即本示例中的所有持久问候语 这是默认示例获取某人的问候语的方式 Override publi
  • 根据 npm start 停止所有进程...

    我正在并行启动多个 npm 任务 使用 不仅仅是按顺序 因此在包 json start npm run watch blog npm run watch data npm run server 这些子任务对我来说很有用 例如 watch b
  • iOS 按钮不起作用

    我在IB中插入了一个按钮 在 h文件中添加了这段代码 IBAction buttonPressed id sender 将动作连接到 IB 中的按钮 Touch Up Inside 然后将其放在 synthesize 正下方的 m 文件中
  • 在应用程序内进行付款的不同选项

    我正在探索使用户能够在应用程序内进行付款的选项 现在我知道用户可以通过两个选项在应用程序内进行付款 1 个应用内购买 已实施 2 贝宝 探索 那么有没有其他的方式来实现购买呢 欢迎任何链接 API 建议 PS 我打算在美国App Store
  • hive xml serDe:表为空

    我想将 xml 数据存储到 hive 表中 XML 数据
  • “嵌入” UIViewController 到另一个中

    我有一个 UIViewController DetailViewController 由顶部的导航栏和覆盖屏幕其余部分的 UIView 组成 是否可以使用 DetailViewController 以外的 UIViewController
  • Python正则表达式解析

    我在 python 中有一个字符串数组 数组中的每个字符串看起来像这样
  • ValueError:合并时不允许负尺寸

    我正在将 2 个数据框合并在一起 他们原本是 csv每个文件只有 7 MB 2 列和 290 000 行 我这样合并 merge pd merge df1 df2 on POINTID how outer 在 32 位 Anaconda 中
  • 将矩阵每列中的 NA 替换为该列的中值

    我试图用该列的中位数替换矩阵每一列中的 NA 但是当我尝试使用lapply or sapply我收到一个错误 当我使用 for 循环并且一次更改一列时 代码有效 我做错了什么 Example set seed 1928 mat lt mat
  • 在php中获取当前一周的第一天和最后一天

    如何获取并显示本周第一天和最后一天的日期 所以在本周它将输出 2012 05 14 2012 05 20 今天是2012年5月17日 这怎么能简单地做到呢 try use 斯特托时间 first date Y m d strtotime l
  • FREETEXTTABLE 为什么或如何给出比其他人更高的排名值

    有一个存储过程在两个表上使用 FREETEXTTABLE 两次 然后合并结果并返回前 50 个 问题是 如果我搜索 Women of Brewster 结果会返回表 A 中排名为 143 的 Confession of an ex doof
  • jquery 一个滑块控制另一个

    如何让一个 jquery ui 滑块控制另一个 如果我滑动滑块 1 它也应该滑动滑块 2 创建滑块 1 时提供滑动 更改函数 该函数使用滑块 1 上正在更改的手柄的 ui value 并设置滑块 2 上的手柄值 根据滑块的手柄数量 您需要调
  • 强制使用 const 对象的 C++ 类

    首先让我问一个一般性问题 在我看来 C 是一种语言 其目的是提供大量功能 为程序员提供最大可能的灵活性 以他认为合适的方式做事 换句话说 它是一种灵活的语言 它允许程序员以比我见过的任何其他语言更多的方式表达自己 这是正确的吗 然后是具体的
  • static_cast(*this) 和 static_cast(*this) 之间的区别

    在下面的代码中 取自Effective C class A char operator std size t position now just calls const op return const cast
  • 如何正确调用setListAdapter

    我已经搜索了很多如何解决这个问题 但没有得到任何结果 我需要的唯一帮助是 请看一下 stackoverflow 上提出的这个问题和答案 这是来自的问题this link 我的活动不扩展 ListActivity 因此此行会引发错误 setL
  • 获取进程/线程的上下文切换次数

    出于好奇 我想知道我的程序被操作系统切换了多少次上下文 就像所有寄存器都被保存并且控制权被传递给另一个进程或线程一样 然后一段时间后一切都恢复了 我们继续 因为它从未发生过 系统是否在某个地方维护了这样的数字 或者是否存在某种黑客行为或其他
  • 将标签与其各自的字段 Swing 一起排列

    我需要将所有字段与相应的标签对齐 这是我的代码 public class Progress extends JPanel implements ActionListener public JLabel ClientIP JTextField
  • 错误渲染视图:java.lang.IllegalStateException:已为此响应调用 getOutputStream()

    我正在 JSF 和 spring 中创建一个项目 其主要目的是在浏览器中生成 PDF 文件 一切看起来都很好 也生成了 pdf 但在控制台上我遇到了这个异常 有人对此有任何想法吗 我搜索了一下 发现很多人都有这个问题 但我没有找到适合我的问
  • CSS、嵌套 div 和边距与填充

    我完全理解盒子模型 这个问题更多的是试图确定关于何时使用边距和何时使用填充的语义方法 这是一个典型的例子 首先 用简单的英语来说 情况 我们有一个容器div 里面有一个段落元素 目标 在 div 内部和段落外部之间有 12px 的空间 选项