可以设置inline元素的padding和margin吗？

最新推荐文章于 2024-08-17 23:56:29 发布
最新推荐文章于 2024-08-17 23:56:29 发布
阅读量4k 收藏 4
点赞数 5
分类专栏： Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21901233/article/details/79465048
版权

对于这个问题，我的第一感觉就是不能，后来查看资料才知道原来我把inline元素设置了width和height无效和题目搞混了，经过查资料和实际验证后，得出以下结论：

    1. inline元素设置width，height属性无效

    2.inline元素的padding和margin可以设置，但是水平方向的padding-right，padding-left，margin-right，margin-left都产生了效果，而垂直方向的padding-top，padding-bottom，margin-bottom，margin-top是没有效果的


郭从墨
关注
专栏目录
inline元素与inline-block元素的margin与padding测试
陈迹·清欢的博客
04-06 649
目录测试paddinginline元素padding测试部分inline-block元素的padding测试部分测试margininline元素的margin测试inline-block元素的margin测试总结 测试padding inline元素padding测试部分 先上代码(注意以下所有代码只要为特殊声明，均给 * 的css选择器添加了margin:0与padding:0)： <sp...
对行内元素设置padding和margin不起作用
weixin_44645309的博客
12-29 1292
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、对行内元素设置padding和margin二、使用步骤1.引入库2.读入数据总结 前言 看了表严肃表哥的电商网站项目，自己动手亲自实现了一遍，前前后后遇到了几个问题，特此总结一下。 一、对行内元素设置padding和margin 代码： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="
内联元素的padding和margin
weixin_45270885的博客
04-27 927
内联元素的padding和margin能设置上吗？ ​ 这是我前段时间面试某中厂被问到的一道面试题，一开始有点懵，但照自己的理解是这样回答的：内联元素不能通过改变宽高来改变元素大小，只能通过内部撑开，padding设置不上，margin-left和right可以设置上，margin-top和bottom设置不上。 ​ 面试结束后，我感觉自己对这一部分的理解还是存在问题，就一些论坛和官网查了相关问题，结论如下： ​ 1.内联元素的pading-left和padding-right可以设置上，paddi
CSS布局新趋势：逻辑属性如何革新margin和padding？
最新发布
m0_69239579的博客
08-17 682
大家好，我是蒜鸭。今天，我们要探讨一个CSS布局中的新趋势：使用逻辑属性来替代传统的margin和padding。这个话题不仅关乎代码的优雅性，更涉及到网页设计的包容性和适应性。让我们一起深入了解这个革新性的变化，看看它如何影响我们的日常开发工作。
css 给inline和inline-block元素设置margin和padding
weixin_30568591的博客
10-16 172
经过简单的测试，行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的，下面来看一下剩下的margin-top,margin-bottom,padding-top,padding-bottom。经过测试，margin-top和margin-bottom都没有作用。而设置padding-top以后，元素边框...
内联元素之padding和margin的表现
wujf1986630的专栏
07-28 973
无标题文档 a定义dispaly:block前 我们是羊1 female我们是羊2定义了margin值women 我们是羊3定义了padding值women 我们是羊4定义了宽高women
你真的了解margin吗？你知道margin有什么特性吗？
01-19
什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以...
css行内元素padding,margin,width,height没有变化
09-25
例如，将元素设置为float: left，这会使其脱离正常的文档流，并且表现为块级元素，从而使得可以应用上下padding和margin。 float: left; width: 200px; height: 200px; padding: 20px; margin: 20px; 需要注意的是...
设置margin和padding为0可去掉DIV与DIV的空白
09-25
为了去除这些空白，最直接的方法是将相邻元素的margin和padding属性设置为0。这样做可以直接消除因为默认样式导致的空白间隙。 例如，如果你有两个相邻的元素，它们在HTML代码中是这样的： ```html 内容一 ...
mysql padding_margin和padding对行内元素的影响
weixin_42266267的博客
01-28 410
这个是在面试的时候，面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来1)inline元素的高度是由元素的内容决定的(字体的大小和行高) 比如你对一个a标签设置它的高度是没有效果的2)HTML元素分为替换元素和非替换元素 替换元素指的是作为其他的元素占位符的一个元素 例如img 非替换元素指内容包含在文档中的元素 hahaha这个...
inline元素的margin与padding
weixin_30388677的博客
03-12 159
替换元素与非替换元素 替换元素(replaced element)：所谓替换元素就是浏览器根据元素的标签和属性，来决定元素具体显示什么内容。比如说：img标签的src属性的值用来读取图片信息并且显示出来。又比如说，input标签的type属性决定是显示输入框还是单选按钮。html中的img、input、textarea、object、video、embed都是替换元素。 非替换元素(non-rep...
display：inline margin padding是否起作用
忘尘_追忆的专栏
02-05 3056
行内非替换元素span, display的方式为inline（默认） *{padding:0px;margin:0px;} p{background:gray;position:relative;left:100px;top:100px;} p span{} 12312312 显示如下： 对p设置padding：padding：10px  ,上下左右都有效果
margin-inline, margin-block，这是啥 CSS 属性？
YopenLang的博客
05-21 3395
当你一开始看到margin-inline时，是不是有种似曾相似的感觉，毕竟你学过margin和display: inline，却还从来没有见过两个的结合物。 其实还有margin-block，这种后缀是*-inline或者*-block的属性称之为逻辑属性（logical properties）。 逻辑属性其实很简单，没啥深奥的魔法，我们来通过一个例子看一下。 首先介绍一个writting-mode属性，它控制文字的方向，举个🌰： 在这个Box中，我们放了一行再也常见不过的文字，writting-m
ul左边padding-inline-start: 40px；多出宽度和高度
热门推荐
weixin_42220130的博客
05-20 1万+
默认的除IE，ul都会自动向右浮动40px
关于inline/inline-block级别元素的margin属性以及padding属性的一些理解
FuChenRenShen的博客
11-10 2573
总的来说，margin和padding属性作为新手入门时常用的属性，很多人都不陌生，相信理解起来都很简单，margin代表外边距，padding代表内边距，至少当时我们老师是这样讲的。 虽然使用起来很简单，但是真正将其实用的又能有多少人，以padding为例，作为一个内边距，就我而言，我会在使用  背景  以及  box-sizing  的时候使用的多，padding-box所占据的无非就是一点...
inline行内元素与padding margin 的断舍离
JiM-W 的博客
12-14 2809
inline 行内元素 padding margin -top bottom line-height
css 之 padding
小白向前冲！
02-02 2366
【1】padding 与 元素的尺寸   ——对块级元素    （1） 当width 为非 auto 时，padding 会影响元素尺寸    （2） 当width 为 auto 或box-sizing 为 border-box 时,padding 不会影响元素尺寸 ——对内联元素   （1） 水平 padding 影响尺寸，垂直 padding 不影响尺寸，但会影响背景占
html文字用竖线隔开,inline+padding技巧：间隔符(分割线)与文字高度不一致，间隔竖线高度缩短方法...
weixin_42164685的博客
06-04 2422
如图所示，在前端经常需要用到各种间隔符号，用CSS实现应该是最佳办法，当然如果你用图片、用符号都可以实现，但应用起来不如CSS来的那么顺，那么爽！今天就用CSS来制作这个间隔符，并且让间隔符号垂直居中，并且高度低于前后文字，这样显得干练！*{font-size:24px;}span{padding:16px6px1px;margin-left:12px;border-left:2p...
1.rgba() 和 opacity的透明效果有什么不同？ 2.行内元素和块级元素的区别是什么？行内元素的pdding和margin可以设置吗？ 3.display的属性值有哪些？分别有什么作用？
05-31
1. rgba() 和 opacity 都可以实现透明效果，但实现方式不同。opacity 是通过设置元素的不透明度来达到透明效果，它会影响元素及其内容的透明度，而 rgba() 只会影响元素的背景色透明度。 2. 行内元素和块级元素的区别在于它们的表现形式和默认宽度。块级元素会独占一行，默认宽度是其父元素的100%，可以设置宽度和高度，常见的块级元素有 div、p、ul、li 等；行内元素则不会独占一行，宽度和高度由其内容决定，不能设置宽度和高度，常见的行内元素有 span、a、img 等。行内元素的 padding 和 margin 可以设置，但是只会在水平方向上起作用。 3. display 的属性值包括 block、inline、inline-block、flex、grid 等。block 表示将元素以块级元素的形式呈现，独占一行；inline 表示将元素以行内元素的形式呈现，不独占一行；inline-block 则表示元素既具有行内元素的特点，又具有块级元素的特点；flex 和 grid 则是用来设置弹性布局和网格布局的。不同的 display 值会影响元素的默认表现形式和布局方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值