行内元素的margin和padding值

最新推荐文章于 2025-07-08 11:55:00 发布
原创 最新推荐文章于 2025-07-08 11:55:00 发布 · 1.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#行内元素margin和padding

本文探讨了块级元素与行内元素在设置margin和padding时的行为差异，特别是垂直方向上的特性。行内元素设置margin-top、margin-bottom等看似有效，实则仅改变内容范围而不影响周围元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我们都知道块级元素都有margin的四个值，和padding的四个值。

其实行内元素设置了margin-top、margin-bottom、padding-top、padding-bottom值是真的是无效；不过要注意一点，对于竖直方向的内边距该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响。

 

有的时候只可意会不可言传，所以还是自己多写几个demo，就理解了。布局也是很重要的

mysql padding_margin和padding对行内元素的影响
weixin_42266267的博客
01-28 460
这个是在面试的时候，面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来1)inline元素的高度是由元素的内容决定的(字体的大小和行高) 比如你对一个a标签设置它的高度是没有效果的2)HTML元素分为替换元素和非替换元素 替换元素指的是作为其他的元素占位符的一个元素 例如img 非替换元素指内容包含在文档中的元素 hahaha这个...
css行内元素padding,margin,width,height没有变化
09-25
主要介绍了css行内元素设置padding,margin,width,height没有变化的解决方法，需要的朋友可以参考下
行内元素padding和margin
lucky__peng的博客
05-02 540
给行内元素设置padding和margin上下无效，左右有效 设置上下padding时区域范围变大（给该行内元素加background-color可见），但实际并不会对周围元素产生影响
前端学习1--行内元素 vs 块级元素（基础概念+案例实操）
最新发布
sleeplover_soda的博客
07-08 487
本文摘要： CSS布局核心概念包含内外边距和元素显示类型。1）内外边距：padding控制内容与边框间距，影响元素尺寸；margin调节元素间距离，支持正负值和百分比，不影响自身尺寸。2）元素类型：块级元素独占整行（如div），可设宽高；行内元素同行排列（如span），仅水平边距有效。通过display属性可转换显示方式（block/inline/inline-block）。实战案例展示了如何运用这些特性制作卡片布局，其中inline-block兼具行内排列和块级样式控制的优势。（150字）
行内元素的padding和margin
weixin_44343449的博客
06-30 207
行内元素的padding-left,padding-right，margin-left,margin-right正常使用。 margin-top，margin-bottom无效果。 padding-top，padding-bottom有效果，但是不占文档位置， 例如span的padding-bottom为200.span后的div则会被填充的200px覆盖。 <span>span&lt...
行内元素的padding margin
qq_26239917的博客
05-13 310
padding生效 margin水平方向生效，垂直方向失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { margin-top: 50px; backgroun...
给行内元素设置padding和margin是否有效
热门推荐
qq_37621289的博客
09-26 2万+
块级元素的padding和margin值的设置都是有效的。行内元素和块级元素一样，都是盒子模型。但是今天做网页时发现给span设置margin-top值并没有效果，所以就想检测一下行内元素的padding和margin值的设置是否有效。代码运行结果如下： 可以看出margin-top和margin-bottom并没有起作用。下面看左右内边距： 可以看到行内元素的margin-left和mar...
微信小程序布局之行内元素和块级元素
03-29
元素按照显示方式主要可以分为块级元素和行内元素，元素的显示方式由display属性控制。 块级元素特点总结： 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
设置margin和padding为0可去掉DIV与DIV的空白
09-25
为了去除这些空白，最直接的方法是将相邻元素的margin和padding属性设置为0。这样做可以直接消除因为默认样式导致的空白间隙。 例如，如果你有两个相邻的元素，它们在HTML代码中是这样的： ```html 内容一 ...
HTML5+CSS3学习笔记（七）行内元素设置margin和padding是否生效（以span、img为例）
Yeee_F
08-10 2663
行内元素设置margin和padding是否生效（以span、img为例）
行内元素的padding 、 margin
qq_47598456的博客
10-17 521
行内元素的margin 左右有效，上下无效 padding 左右有效，上无效 下比较特殊 在视觉上它确实有效，但其实只是表象，看上去增大了，但是并没有撑大盒子，也不影响其他元素。 所以 padding和margin一样左右有效，上下无效。 （红色盒子为行内元素，粉色为块级元素，可见行内盒子并没有把块级元素撑走） ...
行内元素与行内块元素的margin-top问题
weixin_50659023的博客
11-30 1878
行内元素与行内块元素的margin-top问题 对行内元素设置margin-top（bottom）不起作用，margin-right（left）起作用，行内块元素可以设置宽高，设置margin属性也起作用。如果要设置行内元素需转换为行内块元素 行内元素转换为行内块元素： display:inline-block; 行内元素及行内块元素请看前文笔记 ...
行内元素的padding和margin属性
weixin_34342207的博客
12-19 449
1.对行内元素span设置padding-top、padding-bottom、margin-top、margin-bottom属性时，并不会影响span所在行的行高，即使span元素的高度增加，也不会影响所在行的上下文元素的位置。2.对行内元素span设置padding-left、padding-right、margin-left、margin-right元素会影响span元素在行内的位置。3....
margin/padding与块级元素/行内元素的关系
B_qxzb的专栏
11-11 1419
外边距对td元素无效 要想设置td与td之间的间距，只能使用内边距。 内边距对table无效 同上。
关于行内元素可以设置padding,border的测试
Get Things Done
08-01 4496
一、总结 块级元素设置padding，border改变布局，改变嵌套内容的框占据文档流中的范围（同样也影响背景的区域）。 行内元素设置padding，border在应用背景图片的时候会有显示，但是不改变垂直方向的布局。结果会出现设置后padding，border的背景会覆盖上面的元素的内容，下部被当做背景，被下级元素覆盖。 二、测试   Test a border
padding以及行、块元素
webshady的博客
03-29 493
一、内边距 padding （1）属性：padding-left/right/top/bottom （2）简写属性（同border和margin） （3）padding会影响盒子实际大小 也就是说盒子已经有高度和宽度，在指定内边框，会把盒子撑大解决方法；让 width/height 减去多出来的内边距大小即可。开发中直接在最开始设置*{padding=0 padding=0}避免这种情况 二、元素 1.块元素block：无论内容多少，该元素独占一行(可以换行） hr p h...
行内元素和与行内块元素的margin-top问题
KKRK_的博客
12-09 1733
行内元素和与行内块元素的margin-top问题 内联(行级)元素 不能设置宽高，但padding属性可以设置，需要注意的是行级元素不能设置margin-top和margin-bottom属性，但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性，必须将行级元素转换成内联块级元素或块级元素。 源代码： 给行内元素加padding属性，是可以设置的,也可以设置margin-left属性。 <style>
行内元素在竖直方向的margin，以及padding的使用问题
不忘初心，方得始终！
11-17 492
margin，和padding这两个属性是我们在进行页面的布局常用的俩个属性，也是盒模型计算的重要的参数。 那么这两个属性在行内元素上使用的时候实际上和块级元素以及行内块是有区别的，看一下下面的示例： 首先是代码： &lt;div&gt; &lt;span&gt;这是一个行内元素&lt;/span&gt; &lt;p&gt;这是一个块级元素&lt;/p&gt; &lt;/div&gt;...
行内元素和块元素区别
04-11
行内元素和块元素是HTML中常用的两种元素类型，它们在布局和显示上有一些区别。 1. 行内元素（Inline Elements）： - 默认情况下，行内元素不会独占一行，它们会在同一行上水平排列。 - 行内元素的宽度和高度由其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浏览器翻译官~

你的励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值