开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

你把CSS边距放在哪里？

CSS 边距可以放在元素的四个边框（上、下、左、右）中，或者作为内边距（填充）应用到元素内部。

边框内边距：

.selector {
  border-top: 1px;
  border-bottom: 1px;
  border-left: 1px;
  border-right: 1px;
}

内边距：

.selector {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  padding-right: 1px;
}

或者可以创建一个内边距盒，通过设置内边距来实现元素的样式：

.selector {
  padding-left: 1px;
  padding-right: 1px;
  /* 边框样式 */
  border-left: 1px;
  border-right: 1px;
  /* 边框颜色 */
  border-color: transparent transparent white;
  /* 边框宽度 */
  border-width: 1px;
  border-style: solid;
  /* 边框间距 */
  border-top-width: 0;
  border-bottom-width: 0;
}

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS——边距

定义边距包括外边距(Margin)属性和内边距(Padding)属性，外边距属性定义了元素间的间隔，内边距属性定义了元素边框与内容区域之间的空白区域。...概述一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。...外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离，而内边距（padding）则定义了元素内部从边到内容的间隔。...margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。 padding padding规定元素的内边距，该属性不可为负值，其简写形式可一次性设置四个边的内边距。...变更点 CSS3没有增加新的边距属性。

1.2K3 0

CSS_边距填充

边距：元素与元素之间的距离。（无法靠近）填充：指向一个元素的内部，增加空间，（内边距）,与外边距不同，填充会改变元素的大小。随着填充的增加，元素会被撑大。 ? 示例： ...* { margin: 0; /*将所有的元素边距都设置为0*/ } #box { width: 870px; overflow: auto; margin:...auto; /*让父元素自动设置边距，左右边距相等，即可达到居中效果，水平方向有效。

1K1 0

css负边距之详解

自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。...下面是一些你应该知道的关于负边距的事情：他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说，在外边框中使用负边距是允许的。要了解更多可以点击这篇文章负边距不是在hack 这是尤其正确的。...所以付过你使用负边距把元素向上微调的话，所有后面的元素也会向上微调。...学以致用既然我们知道使用负边距在CSS2中是有效的，使用它可以给我们提供一些非常有趣的CSS技巧。把单个列表变成三列如果你有一个列表垂直方向太长了，为什么不把它分成几列呢？...然后通过负边距来把其中一个叠加到另一个上面，保持1到2像素的偏移。这样你就可以二道可选的，机器友好的倾斜字体。

1.8K8 0

css负边距之详解

自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。...下面是一些你应该知道的关于负边距的事情：他们是完全有效的CSS 这不是在跟你开玩笑。W3C甚至都说，在外边框中使用负边距是允许的。要了解更多可以点击这篇文章负边距不是在hack 这是尤其正确的。...所以付过你使用负边距把元素向上微调的话，所有后面的元素也会向上微调。...学以致用既然我们知道使用负边距在CSS2中是有效的，使用它可以给我们提供一些非常有趣的CSS技巧。把单个列表变成三列如果你有一个列表垂直方向太长了，为什么不把它分成几列呢？...然后通过负边距来把其中一个叠加到另一个上面，保持1到2像素的偏移。这样你就可以二道可选的，机器友好的倾斜字体。

2.2K4 0

CSS盒模型及边距问题

盒模型是CSS的基石之一，页面的每一个元素都被看作一个矩形框，分别由外边距，边框，内边距，内容组成， ?...在CSS中，width和height的值指的是内容的宽高，增加外边距，边框，内边距并不会对内容造成影响，但是会增加整体的元素框的尺寸，假设10元素的外边距，5元素的内边距，那么要使框达到100元素，就需要给定...它的width属性指的不是内容的宽度，而是内容，内边距，边框的宽度，如上面的例子，在IE6中显示为： image.png CSS3中的box-sizing属性可以定义使用哪种盒模型，但一般很少使用这个属性...当一个元素包含在另一个元素中，假设该元素没有内边距或者边框将外边距分开，那么他们的顶、底边框也会发生重合。 ? 解决这种的情况的方式为给里面的元素增加内边距或者边框。...诸如，以一个典型的几个段落组成的文章为例，如果没有叠加，那么段落之间的边距就会是段落的顶外边距的两倍，但叠加之后，就会有着一样的高度，如图： ?

9272 0

CSS盒子模型-边距合并

1、CSS外边距合并 CSS外边距合并，只有上外边距和下外边距才会触发外边距合并，左外边距和右外边距不会。 2、相邻元素合并-上下源代码： div1 div2 运行效果如下： div1和div2 根据盒子模型的计算规则，div1下边距...实际CSS规则是合并的，因此div1和div2 之间的距离为100px;如果div1的下边距和div2的上边距，边距值不一样，那么以最大的边距为最终取值。 ?...因为上下边距合并，所以div2距离顶部100px；由于左右边距不合并，所以div2距离浏览器左边的距离是200px。 !...下边距，实际占用了100px。

1K1 0

【说站】css边距重叠是什么

css边距重叠是什么 1、边界重叠是指两个或两个以上盒子的相邻边界重合在一起，构成单一边界。可以相邻也可以嵌套，其中没有非空内容、补白、边框。 ... .father{ background: #f436365e; overflow: hidden; } .child{ height: 20px; margin...div> this is child1 this is child2 this is child1 以上就是css...边距重叠的介绍，希望对大家有所帮助。...更多css学习指路：css教程本文教程操作环境：windows7系统、css3版，DELL G3电脑。

9322 0

IT课程 CSS基础 025_边距和填充

边距在CSS中，边距与填充是两个不同的概念，都是用于控制元素之间的空间和影响页面的布局。...边距（外边距）边距（margin）是指元素与其相邻元素之间的空间，边距可以用于控制元素之间的距离，影响页面的布局，边距本身没有背景颜色，是完全透明的，不会影响元素的实际大小。...div class="base example3"> 效果：可使用 margin-top、margin-right、margin-bottom、margin-left 单独设置某一方向的边距...background-color: blue; width: 200px; height: 200px; } 效果：填充（内边距）

751 0

你的SQL语句放在了哪里？

这段时间整理自然框架，遇到了一个老问题——SQL语句放在哪里？对于有规律的比较好办了，但是对于哪些没啥规律的怎么办呢？想了一下，有几种方式，弄了张图。欢迎大家补充。...div>"); tmpdiv2.attr("id", "divdropBG").html("aaaaaa") .css...("position", "absolute").css("left", 0).css("top", 0) .width($(document).width...("position", "absolute").css("background-color", "#fff") .css("opacity", ".60...").css("filter", "alpha(opacity=60)/9") .css("border", "1px solid #99bbe8").css

1.3K8 0

你将你的Helm chart放在哪里？

在Helm的使用过程中，我们注意到有几个问题不断出现：你将你的Helm chart放在哪里？你是使用app文件保存它们还是使用chart仓库？你如何划分Helm chart？...一旦他们想了解Helm，大多数应用开发者会把他们的chart放在最容易处理的地方——也就是他们维护的同一个repo。...如果将其实际应用到Helm chart维护和一般的基础架构配置中，就会把大部分的责任放在应用开发者的手中。他们也会承担起“Deployer”的角色，并改变他们拥有的仓库中的配置。...系统工程师仍然可以把他们专门维护的设置集中起来。...如果你有几十个服务都非常相似，那么共享chart是更好的选择。只是要记住，你必须把它维护在一个中心repo中。但是这增加了意外耦合的风险，可能会破坏一个服务部署。

2.4K4 0

【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )

文章目录一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距二、清除元素默认的内外边距 1、清除方式 2、代码示例三、行内元素边距设置一、元素默认的外边距 ---...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...也消失了 ; 三、行内元素边距设置 ---- 为行内元素设置上下边距是无效的 , 建议只为行内元素设置左右边距 ; 如果为行内元素设置了上下边距 , 可以在某些浏览器或者 web 应用场景出现适配问题...style type="text/css"> * { /* 清除标签默认的内边距 */ padding: 0; /* 清除标签默认的外边距 */...默认外边距显示效果 : 按下 F12 键 , 进入调试模式 , 选中 span 行内元素 , 为其设置四个边距 , 只有左右边距 50px 生效 ;

2.4K1 0

腾讯把数据中心放在了贵州哪里？ | 拔刺

--- 拔出你心中最困惑的刺！--- 在这个用过即弃的时代，不要让你的求知欲过期。今日拔刺： 1、腾讯把数据中心放在了贵州哪里?...本文 | 2096字阅读时间 | 5分钟腾讯把数据中心放在了贵州哪里？答案是贵州贵安的栖凤坡。贵安新区其实位于贵阳市和安顺市之间，所以用这两个地方的地名的第一个字，取名为贵安。

2.2K5 0

2019年CIO应该把钱花在哪里？这个调查告诉你

新的一年，许多CIO都在考虑把预算放在哪个方向，对哪些领域的预算增加一些，对哪些领域的投资减少一些。如果还在犹豫，不如放眼全球，看看其他CIO是怎么决定的。

4594 0

这家人工智能公司告诉你应该把钱投向哪里

金融市场是受新闻影响的—所以如果你能彻底地理解新闻，而且能非常迅速，那你就能抢在市场变化前面。...互联网对美元的看法图表 “我可以告诉你有多少对标普500指数感到满意，人们对人民币的感觉如何，”Philippe说。“有一群心理学家和数据科学家一起合作来开发这个软件。

2.5K9 0

深入学习下 CSS 间距相关的知识

请参阅下面的问题是如何解决的： CSS： .element:not(:last-child) { margin-bottom: 1rem; } 使用 :not CSS 选择器，你可以轻松地删除最后一个子元素的边距以避免不必要的间距...使用 CSS 网格，你可以使用 grid-gap 轻松添加间距。此外，你不需要关心网格项目的宽度或底部边距。 CSS Grid 为你做一切！...（对不起，如果你饿了）你能想到这张卡的间距会在哪里使用吗？见下图。...是的，你猜对了！负边距是解决办法。...见下文，你看到哪里的灵活性了吗？

13.4K4 0

关于CSS 打印你应该知道的样式配置

CSS 打印分页功能需求： html 在一个区域显示数据，当放不下时，自动第二页存放，打印你可以使用 CSS 的分页属性来实现这个功能。...CSS 分页属性包括 page-break-before、page-break-after 和 page-break-inside，它们可以控制在哪里分页。...custom-break { page-break-before: auto; /* 默认值，根据需要调整 */ page-break-after: always; } } 具体来说，你可以将要显示的数据放在一个容器元素中...如果你需要打印这些数据，只需将页面设置为打印模式即可。在打印预览中，你可以看到所有的数据被正确地分页，并且可以跨页打印。...@media print { body { font-size: 12pt; color: #000; } } 3.设置页面边距：通过设置 margin 属性来调整打印页面的边距

6634 0

译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

此外，CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...你能想到此卡片在哪里使用间距吗？参见下图。 ?...是的，你猜对了！负边距是解决办法。...你猜到了，那是因为页边距折叠。 Just In Case Margin 我喜欢把这个叫做 “Just in case” margin，因为这就是字面意思。考虑一下下面的模型图。 ?...你是否曾经考虑过将边距与具有不同 writing-mode 的元素一起使用时应如何表现？考虑以下示例。 ?

11.8K1 0

博客园自定义模板_锁屏样式怎么弄自定义

下载完的文件里有highlight.pack.js，决定你的代码哪里高亮，而styles文件夹存放各种样式，决定你的代码怎么样高亮。按照官网文档引入三行代码即可生效： <!...打开你想要引入的css样式，复制代码黏贴到“页面定制css代码”，注意：这里要直接把css文件的代码复制过来，而不是引用！然后将js添加到“博客园侧边栏公告” 注意：这里不需要引入css！...important;; /* 代码块不换行 */ white-space: pre; word-break: normal; } 根据自己的需求修改代码，然后把代码添加到“页面定制....hljs这块就是控制代码块字体和边距的样式，你可以直接根据自己的需求调整样式然后直接黏贴到“页面定制css代码”里就行了。...博客园代码块默认边距是5，字体大小是12，行高是1.5，我想让换个好看的字体，顺便行距大小啥的都大点： @font-face { font-family: consola; src:

4151 0

Java学习笔记-全栈-web开发-02-css必备基础

若采用内部样式，则你需要写20个相同的样式分别放在每个网页的头部若采用外部样式，则你只需要写一个，然后在20个里面导入样式即可样式不应当与html耦合 5. css选择器 css选择器主要是用于选择需要添加样式的...5. css属性 5.1 字体 css字体属性定义文本的字体系列，大小，加粗，风格(如斜体)和变形(如小型大写字母) 常用属性: font:简写属性，作用是把所有针对字体的属性设置在一个声明中。...5.4 尺寸 CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。...CSS border 属性允许你规定元素边框的样式、宽度和颜色。常用属性: border:简写属性，用于把针对于四个边的属性设置在一个声明。...border-color:简写属性，定义元素边框中可见部分的颜色，或为四个边分别设置颜色。 border-style:用于定义所有边框的样式，或者单独为各边设置边框样式。

1.7K3 0

CSS爱心：把你的心我的心串一串

如果你看过前面小节《CSS3 Box-Shadow Loading，创造无限可能》，应该看到这个效果，就可以自己动手做了。...下面我们一起动手试试吧绘制心形 css .heart { font-size: 30px; width: 1em; height: 1em

3131 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭