CSS边距属性定义元素周围的空间。
在我的 WordPress 主题中包含图像时,我在 img 下方有一些无法解释的图像边距/空间。您可以在这里看到它:http://www.wlanradios.net/logitech-squeezebox-radio/ 看到亚马逊标志...
我正在尝试调整 Flexbox 容器内的过滤器下拉列表。但由于某种原因,第一行的前两列总是会移动。这让我发疯。我也尝试过使用间隙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .cl1{ margin: 0px; padding: 20px; } #d1{ display: inline-block; background-color: rgb(104, 204, 162); border: 3px solid blue; } #d2{ display: inline-block; background-color: rgb(255, 119, 226); border: 3px solid rgb(0, 10, 203); } </style> </head> <body> <div class="cl1" id="d1">1st block</div> <div class="cl1" id="d2">2nd block</div> </body> </html> 上述代码的输出 margin 属性对划分没有影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; } .cl1{ padding: 20px; } #d1{ display: inline-block; background-color: rgb(104, 204, 162); border: 3px solid blue; } #d2{ display: inline-block; background-color: rgb(255, 119, 226); border: 3px solid rgb(0, 10, 203); } </style> </head> <body> <div class="cl1" id="d1">1st block</div> <div class="cl1" id="d2">2nd block</div> </body> </html> 上述代码的输出 现在我使用通用选择器 {} 并将边距定义为 0px,它开始工作。 为什么边距在类选择器中不起作用,而在通用选择器中不起作用? 还有,哪里可以了解CSS中的所有显示值? 正如LoS所述,许多浏览器默认将 body 元素的 margin 属性设置为正值(根据我的经验,它似乎总是 8px)。要使 HTML 元素接触视口的边缘,必须将 margin 属性设置为 0px。当您不希望视口边缘和网页边缘之间存在间隙时,应始终使用以下 CSS 代码: body { margin: 0px; }
我正在尝试将商品计数圆圈放置在购物车图标上。当我设置边距来调整项目圆圈时,它会开箱即用。见下图: 这是带有
这似乎是一个常见问题,但我找到的解决方案都不适合我。 超文本标记语言 这似乎是一个常见问题,但我找到的解决方案都不适合我。 HTML <html> <head> <link rel="stylesheet" href="c/lasrs.css" type="text/css" /> </head> <body> <div class="header"> <img src="i/header1.png"> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh.</p> </div> </body> </html> CSS body { min-width: 950px; background-color: #FFFFFF; color: #333333; } .header { width: 950px; height: 171px; margin: 0px auto; padding: 0px; background-color: #CCCCCC; position: relative; } .content { width: 950px; margin: 0px auto; padding: 0px; background-color: #E3EEF9; position: relative; } 我故意破坏了图像路径并为 .header div 设置了背景颜色,以便我可以看到它们是否接触。这就是我的页面的样子: 如您所见,我尝试将 divs 上的填充和边距设置为 0。 为什么还有差距? 这是由于以下原因: 浏览器会自动在每个 <p> 元素之前和之后添加一些空格(边距)。可以使用 CSS 修改边距(使用边距属性)。 所以尝试一下: p { margin: 0px; } 注意:浏览器也会在其他元素上添加默认样式!这在不同情况下既有用又烦人。有三种方法可以解决这个问题: 完全删除浏览器可能具有的任何默认样式。这是通过使用“重置样式表”来完成的。最受欢迎的是 Eric Meyer 的 CSS Reset。如果您想全力以赴并在任何浏览器中拥有“完全干净的开始”,请使用 Meyer 的技术。此方法优于使用缓慢的 *{ margin:0; padding:0; } 重置方法(请阅读此处原因)将样式表标准化为您自己的默认值。网页设计师的一大烦恼是不同的浏览器使用不同的默认样式。然而,“完全重置”会带来重新定义所有元素样式的耗时麻烦。因此,您可以通过使用一组预定义的一致且合理的默认样式来“规范化”浏览器的所有默认样式。常见的方法是使用 normalize.css (Twitter、Github 和 SoundCloud 使用这个!) 必要时调整默认值或有意识地解决默认值。使用默认值的最常见方法(并不是说这是最好的方法)是“知道”它们的存在并在必要时进行调整。默认样式的存在是有原因的:它们可以帮助开发人员快速获得他们想要的外观。是不是眼神有点不对劲?只需相应地调整样式即可。但是,请确保为正确的元素使用正确的标签。例如,您不应删除 内联文本的 <p> 边距,而应使用 <span> 标签(无默认 margin) 这应该可以帮助您了解幕后发生的事情。 段落中的边距超出了 div(这是正常的),您可以设置 p { margin: 0; } 或将隐藏的溢出应用到您的div div { overflow: hidden; } 使用 *{ padding:0; margin:0; } 按照你的风格 添加此: *{ margin: 0; padding: 0; } 两个 div 都互相接触。默认情况下,DIV 的边距/填充始终为 0,因此您的修改没有效果。 然而 <p> 确实有一个边距,并且由于它嵌套在 div 中,所以看起来 div 有一个填充。 p { margin: 0; } 会解决这个问题。 尝试使用一些重置CSS,因为所有浏览器都带有一些默认样式链接边距、填充、行高、字体样式,并且您需要从无样式元素开始。 我建议使用 Eric Meyer 重置 CSS ( http://meyerweb.com/eric/tools/css/reset/ ) 试试这个: http://jsfiddle.net/JKS3k/3/ CSS p{ margin:0; } 或 * { margin:0; padding:0; }
我有一个带有以下CSS的#cover div #覆盖 { 背景颜色:#FFFFFF; 高度:100%; 不透明度:0.4; 位置:固定; 宽度:100%; z 指数:9000; } 我想要它覆盖...
为什么我的表格单元格看起来有填充,即使我已将其设置为不填充?
我创建了一个没有边距、填充或边框的瘦 CSS 类: 。瘦骨嶙峋的 { 保证金:0 0 0 0; 填充:0 0 0 0; 边框:0 0 0 0; } 我将它应用到包含图像的行,该图像...
所以我正在网站的一个部分上工作,其中有六个盒子组合在一起,三个在顶部,三个在底部,我想给它们留出边距以将它们分开,但随后我想要 . ..
我已经尝试解决这个问题好几天了,似乎没有任何效果,我开始考虑从头开始整个项目。 我决定在我的
如何删除 flutter IconButton 或其他 Button 上的边距?
按钮的默认边距根据其使用的平台进行自适应。 在桌面应用程序上,这些似乎没有边距,而在 android、ios 上它有边距,如何解决这个问题 我试过了...
默认情况下,ggplot2 图形在绘图区域和轴之间有一个小边距,例如,x 轴在 y=0 的正下方与 y 轴相交。我知道如何删除它。我的问题...
Bootstrap 5 - mt-5 在 ≥768px 屏幕尺寸上覆盖 mt-md-0
在中等和中等以下的屏幕尺寸上,我有 4 个列,它们将相互重叠,我需要在中等和中等以下的屏幕尺寸上给 2 列一些边距,并在中等屏幕以上的屏幕上将其删除...
Android Java 代码中“Margin”和“Padding”的命令和属性顺序
我之前问过: 是否可以在 Android XML 中仅用一行设置“Margin”和“Padding”。 ...根据@MikeM.的评论,这似乎不是po...
我如何使用 min 和 max CSS 函数来处理 auto
我希望能够使用常见的 margin: auto 属性,但具有最小边距,例如: 边距:最大 0(自动,16 像素); 这将使元素水平居中并且仍然强制执行 16px 的边距...
如何在 PyQtGraph PlotWidget 周围添加填充?
我正在尝试在 PlotWidget 周围添加填充,因为默认设置非常严格。然而,我尝试采取的策略并没有奏效。默认填充如下所示。 默认p...
在我的wp网站中,有一个注册页面。我在其中放置了一个注册表。 页面链接 --> 注册页面 表单被放置在包含类 .form-contain 的 div 中。 .form-包含{ 显示:...
HTML 为其 标签设置的默认边距是多少?我注意到有一些自动边距,但我想知道是否有人知道它是多少(以及是以 px 还是 % 为单位等)。
我正在尝试建立一个网站,该网站仅显示文本和链接,并且在输入文本时突然有两个文本块突然开始表现得好像有一堵墙和汽车
需要帮助消除边框和背景之间的神秘填充。在预览中,它看起来不错,但导出时框架内有奇怪的填充。 这是代码: 需要帮助消除边框和背景之间的神秘填充。在预览中,它看起来不错,但导出时框架内有奇怪的填充。 这是代码: <div class="p-2" style="width:100%; max-width: 400px; border: 26px solid transparent; border-image: url(https://i.imgur.com/RtR8M9i.png) 52 stretch; border-image-slice: 35 fill; image-rendering: pixelated;"> <div class="card border-0 rounded-0 py-10 px-10" style="background:#dbaa41; color:#3e2a14;"> <p dir="ltr">┏━───────────────╮</p> <p dir="ltr">┃➥ Text goes here</p> <p dir="ltr">┗━───────────────╯</p> </div> </div> 我尝试将边框中的填充设置为0,class =“no-margin”,更改fill:和background.color:,但没有任何效果。我还将分享它在预览中的外观以及它如何导出为 预览效果如何 如何保存/导出 请检查border-image属性是否正确应用,没有任何额外空间。 <div class="p-0" style="width:100%; max-width: 400px; border: 26px solid transparent; border-image: url(https://i.imgur.com/RtR8M9i.png) 52 stretch; border-image-slice: 35 fill; image-rendering: pixelated;"> <div class="card border-0 rounded-0 p-0 m-0" style="background:#dbaa41; color:#3e2a14;"> <p dir="ltr" style="margin: 0; padding: 0;">┏━───────────────╮</p> <p dir="ltr" style="margin: 0; padding: 0;">┃➥ Text goes here</p> <p dir="ltr" style="margin: 0; padding: 0;">┗━───────────────╯</p> </div> </div> 尝试此操作并检查导出版本中的填充问题是否已解决