12赞

当前位置: 开发笔记 > 前端 > 正文

何时在CSS中使用margin和padding

作者：mobiledu2402851173 | 2023-08-10 10:13

如何解决《何时在CSS中使用margin和padding》经验，为你挑选了15个好方法。

在编写CSS时,是否有一个特定的规则或指南应该用于决定何时使用margin以及何时使用padding？

1> pavon..：

TL; DR: 默认情况下,我在任何地方使用边距,除非我有边框或背景,并且想要增加可见框内的空间.

对我来说,填充和边距之间的最大区别是垂直边距自动折叠,而填充不会.

考虑两个元素,一个在另一个之上,每个元素都有填充1em.此填充被视为元素的一部分,并始终保留.

因此,您将得到第一个元素的内容,然后是第一个元素的填充,接着是第二个元素的填充,接着是第二个元素的内容.

因此,这两个元素的内容最终会2em分开.

现在用1em边距替换该填充.边距被认为是在元素之外,并且相邻项目的边距将重叠.

因此,在此示例中,您将得到第一个元素的内容,后跟1em合并边距,后跟第二个元素的内容.所以这两个元素的内容只是1em分开的.

当你知道你想要说1em一个元素周围的间距时,无论它旁边是什么元素,这都非常有用.

另外两个很大的区别是填充包含在点击区域和背景颜色/图像中,但不包括边距.

+1当样式排版和段落,标题和列表的abritary序列时,由于邻近的边缘折叠行为,它几乎总是更好地用边距来隔离元素.

为什么垂直边距会崩溃而横向边缘不会崩溃？这可能会让很多人感到困惑

垂直边距仅针对块元素折叠.对于内联块元素,边距是垂直和水平添加的.所以我不确定水平边距不会在块元素上崩溃是一个问题,因为它们无论如何都要填充它们的容器.

另外你应该注意,当使用`box-sizing:border-box;`时,如果你有`width:100px; padding-left:20px;`总宽度仍然是100px但是内容的面积减少了20px,不像`box-sizing:content-box;`其中padding在计算内容宽度时是分开的,这使得你的总宽度为120px内容箱;

"为什么垂直边缘会崩溃而横向边缘不会崩溃？" 没有机制可以将块元素并排放置而不使用浮点 - 其边缘永远不会崩溃(甚至垂直)或绝对定位,其中显然没有崩溃,或内联块,它使用不同的模型,其中考虑内联和内容(空格,文本)很重要,或其他类似于表,flexbox,列的列,其中列之间的间隙具有特殊行为.因此,简而言之,即使可能,也不能使用水平边缘折叠*

2> John Boker..：

边距位于块元素的外侧,而填充位于内部.

使用margin将块与其外部的东西分开

使用填充将内容移离块的边缘.

在此输入图像描述

然而,正确答案是由@pavon在下面.相邻元素的边距重叠,而填充不重叠.即,总分离是"填充(A)+填充(B)+最大(边距(A),边距(B))"

这是一个很好的做法:使用**纯红色边框**来检查填充和边距.有时候,我们可能搞乱像""这样的东西,它包含一些文字,被填充和边缘包围.使用此技巧来检查我们可以点击多少空间.

3> Scott..：

我见过的最好用例子,图表,甚至是"自己尝试"的视图来解释这个问题就在这里.

我认为下面的图表可以立即直观地了解差异.

在此输入图像描述

要记住的一件事是符合标准的浏览器(IE怪癖是一个例外)只渲染给定宽度的内容部分,因此在布局计算中要跟踪这一点.另请注意,边框有点像Bootstrap 3支持它.

http://www.w3.org/TR/CSS2/box.html#box-dimensions和来自w3的图片http://www.w3.org/TR/CSS2/images/boxdim.png

4> stvnrynlds..：

对于您的问题有更多的技术解释,但如果您正在寻找一种方法来考虑边距和填充,这将有助于您选择何时以及如何使用它们,这可能会有所帮助.

将块元素与挂在墙上的图片进行比较:

该浏览器窗口就像是在墙上.

的内容是一样的照片.

该保证金就像框架图画之间的墙壁空间.

该填充就像围绕着照片抠图.

该边界就像一个框上的边框.

在边距和填充之间进行选择时,当你将一个元素与墙上的其他东西间隔开时,使用边距是一个很好的经验法则,当你调整元素本身的外观时,使用填充.边距不会改变元素的大小,但填充通常会使元素变大¹.

¹ 可以使用box-sizing属性更改此默认框模型.

嘿vapcguy,谢谢你的意见.当声明元素的宽度或高度时,我的声明通常是正确的,而具有未声明尺寸的元素实际上不受"border-box"的影响(参见:http://jsfiddle.net/8yravLmL/1/).我会让我的答案更加微妙,以避免混淆.

5> Touhid Rahma..：

MARGIN vs PADDING:

边距用于在元素中创建该元素与页面的其他元素之间的距离.其中padding用于创建元素的内容和边框之间的距离.

边距不是元素的一部分,其中填充是元素的一部分.

请参阅下面从Margin Vs Padding - CSS Properties中提取的图像

保证金与填充

6> 小智..：

来自https://www.w3schools.com/css/css_boxmodel.asp

不同部分的说明:

内容 - 显示文本和图像的框的内容

填充 - 清除内容周围的区域.填充是透明的

边框 - 围绕填充和内容的边框

保证金 - 清除边界以外的区域.保证金是透明的

实例(通过更改值来玩):https: //www.w3schools.com/css/tryit.asp？filename = trycss_boxmodel

7> Frank Schwie..：

下面是一些HTML,演示了如何padding和margin影响可点击,和背景填充.对象接收对其填充的单击,但点击对象边距区域将转到其父对象.

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});


.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}






















    

    
        
            
            
                
                    
                
            

            
                mobiledu2402851173            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    ajax
                
                                
                    bootstrap
                
                                
                    chart
                
                                
                    chrome
                
                                
                    css
                
                                
                    css3
                
                                
                    firebug
                
                                
                    firefox
                
                                
                    html
                
                                
                    html5
                
                                
                    javascript
                
                                
                    jquery
                
                                
                    json
                
                                
                    node.js
                
                                
                    npm
                
                                
                    postman
                
                                
                    vue.js
                
                                
                    webkit
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1用凌空上传多个图像？
                
                                
                    2屏幕上的C#WinForms程序中的闪烁清除
                
                                
                    3如何git责备一个目录
                
                                
                    4在Dex阶段构建大型Codename One应用程序时出错
                
                                
                    5PowerShell-Set-Culture似乎没有任何改变
                
                                
                    6MVC 5绕过Windows身份验证用户身份验证的用户
                
                                
                    7Opcache清除太快
                
                                
                    8java,l = inputStream.readLine())!= null背后的原理逻辑
                
                                
                    9如何在Swift中删除AVPlayerViewController上的双击缩放功能
                
                                
                    10二进制运算符'&'不能应用于'SCNetworkReachabilityFlags'和'Int'类型的操作数
                
                                
                    11线性时间Euler的Totient函数计算
                
                                
                    12安装Rcompression软件包时出错
                
                                
                    13渲染问题无法加载LayoutLib:
                
                                
                    14公共与受保护的抽象类方法
                
                                
                    15为什么没有调用构造函数？
                
                                
                    16如何在IOS键盘顶部的键盘上添加完成按钮？
                
                                
                    17在两秒钟之后做一些事情
                
                                
                    18如何在python中找到facebook上的朋友的名字
                
                                
                    19对于创建表查询，query.executeUpdate（）在hibernate中返回什么
                
                                
                    20从网络摄像头快速提取帧:C++和OpenCV与Matlab







    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有