经过简单的测试，行内元素或者行内块元素的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. redis之事务

    一.是什么 可以一次执行多个命令,本质是一组命令集合.一个事务中的所有命令都会序列化,按顺序的串行化执行而不被其他命令插入,不许加塞.一个队列中,一次性.顺序性.排他性的执行一系列命令. 二.事务常用 ...

  2. Redis笔记(4)独立功能的实现

    1.前言 本节记录一下redis的一些功能上的实现,包括发布订阅.事务.Lua脚本.排序.二进制位数组.慢查询日志和监视器. 2.发布订阅 上一章介绍sentinel的时候说到了sentinel会订阅 ...

  3. .Net 鉴权授权

    在这里总结一下工作中遇到的鉴权和授权的方法 ① 固定token的方案 通过在nginx或者代码中写死token,或者通过在限制外网访问的方式已来达到安全授权的方式 ② session方案 分布式会话方 ...

  4. Selenium自动化测试Python三：WebDriver进阶

    WebDriver 进阶 欢迎阅读WebDriver进阶讲义.本篇讲义将会重点介绍Selenium WebDriver API的重点使用方法,以及使用模块化和参数化进行自动化测试的设计. WebDri ...

  5. Android内存管理篇 - 从updateOomAdjLocked看lowmemorykiller之外的Android进程回收机制

    提起android的进程回收机制,大家所熟知的是Android的lowmemroykiller的机制.当系统可用内存低于某个阀值时,即会杀死这个阀值对应的Adj值的所有应用.但是本篇文章并为是要介绍L ...

  6. Chapter 3 Phenomenon——19

    His unfriendliness intimidated me. 他的不友好恐吓到了我. My words came out with less severity than I'd intende ...

  7. gateway-workman

    最外层start.php,设置全局启动模式,加载Application里的个子服务目录下应用的启动文件(start开头,这些文件都是workman\work类的子类,在载入文件的同时,这些子服务会生成 ...

  8. 对CAP原理的理解

    对CAP原理的理解 CAP原理按照定义,指的是C(Consistency)一致性,A(Availability)可用性,P(Partition tolerance)分区容错性在一个完整的计算机系统中三 ...

  9. tcp/ip通信中udp头部结构udphdrp->check校验计算

    通过raw socket修改通信数据后,可通过函数 set_udp_checksum1 重新校验计算iph->check值 在http://www.cnblogs.com/dpf-10/p/78 ...

  10. 【LeetCode题解】3_无重复字符的最长子串（Longest-Substring-Without-Repeating-Characters）

    目录 描述 解法一:暴力枚举法(Time Limit Exceeded) 思路 Java 实现 Python 实现 复杂度分析 解法二:滑动窗口(双指针) 思路 Java 实现 Python 实现 复 ...