经过简单的测试，行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的，下面来看一下剩下的margin-top,margin-bottom,padding-top,padding-bottom。经过测试，margin-top和margin-bottom都没有作用。而设置padding-top以后，元素边框则会向上超出父元素，如下图所示，而不是像正常的块元素一样表现。

　　

　　而给行内元素加上padding-bottom后，显示效果如下：

　　

　　确实显示出了效果，但是只有效果，而不影响其他元素（因为下一行内的span元素占据了上一行中span元素的padding-bottom）

css 给inline和inline-block元素设置margin和padding的更多相关文章

  1. inline元素的margin与padding

    替换元素与非替换元素 替换元素(replaced element):所谓替换元素就是浏览器根据元素的标签和属性,来决定元素具体显示什么内容.比如说:img标签的src属性的值用来读取图片信息并且显示出 ...

  2. 块级元素及内联元素对margin、padding的态度

    1.块级元素 margin:跟标准一样,设置该块级元素边框与同级兄弟元素或者父元素的距离,俗称外边距. padding:先延伸边框(也就是优先改变元素尺寸而不动元素中内容的位置),当边框碰到父元素的边 ...

  3. 多方法解决设置width:100%再设置margin或padding溢出的问题

    2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...

  4. tr 设置margin、padding无效

    tr.td设置margin 无效 tr 设置padding无效.td设置padding有效

  5. CSS——行内元素的margin与padding

    行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效 例如span: <!DOCTYPE html> &l ...

  6. 常用元素默认margin和padding值问题探讨

    关于默认元素在不同浏览器中的margin值是多少的问题,今天做了一个探讨 复制代码 代码如下: // body的margin值 firefox 20.0 ----------------------- ...

  7. margin和padding对行内元素的影响

    这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...

  8. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  9. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

随机推荐

  1. 在vue项目中stylus的安装及使用

    Stylus是一个CSS预处理器. Stylus安装包安装: dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone $ cnpm install stylus --sa ...

  2. ProxySQL 部署 Single Writer Failover 读写分离 (PXC)

    主机信息: Proxysql: 如果你忽略了ProxySQL会报告主机组的变化,我建议把它设置为0,除非你试图调试"某些东西",否则你的日志将很快变得巨大.UPDATE globa ...

  3. 上台阶问题（递归，DFS）

    题目 一共39层台阶.如果我每一步迈上1个台阶或者两个台阶,先迈左脚,再迈右脚,然后左右交换,最后一步迈右脚,也就是一共要走偶数步,那么,上完39级台阶,有多少种不同的方法? 思路 采用递归的思想,边 ...

  4. Oracle修改指定表空间为自动扩展

    1.数据文件自动扩展的好处 1)不会出现因为没有剩余空间可以利用到数据无法写入 2)尽量减少人为的维护 3)可以用于重要级别不是很大的数据库中,如测试数据库等 2.数据文件自动扩展的弊端 1)如果任其 ...

  5. (转)X-Frame-Options响应头缺失漏洞

    原文:https://blog.csdn.net/ljl890705/article/details/78071601 x-frame-options响应头缺失漏洞. 故名思意,就是返回的响应头信息中 ...

  6. (转) 面向对象设计原则（二）：开放-封闭原则（OCP）

    原文:https://blog.csdn.net/tjiyu/article/details/57079927 面向对象设计原则(二):开放-封闭原则(OCP) 开放-封闭原则(Open-closed ...

  7. Jmeter测试Mysql数据库-入门篇

    一.jmter配置数据库 1.在配置jmter之前需要先安装数据库连接池驱动,进入到官方下载页面https://dev.mysql.com/downloads/connector/j/,下载对应的驱动 ...

  8. JavaScript -- FileSystemObject-文件夹

    -----057-FileSystemObject-文件夹.html----- <!DOCTYPE html> <html> <head> <meta htt ...

  9. springboot-33-使用maven打瘦包

    直接使用maven的插件打包的话, 打出来一个jar, 会非常大, 有时候在服务上传的时候会非常不方便, <plugin> <groupId>org.springframewo ...

  10. Linux-(type,vim)

    type命令 1．命令格式: type [参数][命令] 2．命令功能: 使用 type 命令轻松找出给定的命令是否是别名.shell 内置命令.文件.函数或关键字.也可以找到命令的实际路径. 3．命 ...