经过简单的测试，行内元素或者行内块元素的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. android(java) 开发过程中经验及总结记录

    android(java) 开发过程中经验及总结记录

  2. 阿里2015校招面试回忆录（成功拿到offer）

    1. 引言 继上次“百度2015校园招聘面试题回忆录(成功拿到offer)”文章过后,大家都希望除了题目之外,最好能给出自己当时的回答情况,看看有没有什么回答技巧,这样更有参考价值. 嗯,建议的很对, ...

  3. lucene 初探 - 查询

    lucene初探, 是为了后面solr做准备的. 如果跳过lucene, 直接去看solr, 估计有点懵. 由于时间的关系, lucene查询方法也有多个, 所以单独出来. 一. 精确查询 /** * ...

  4. 人人，金山西山居，腾讯互娱，微信，网易游戏offer及面经

    转自:http://www.itmian4.com/forum.php?mod=viewthread&tid=3985 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Of ...

  5. 【LeetCode题解】347_前K个高频元素（Top-K-Frequent-Elements）

    目录 描述 解法一:排序算法(不满足时间复杂度要求) Java 实现 Python 实现 复杂度分析 解法二:最小堆 思路 Java 实现 Python 实现 复杂度分析 解法三:桶排序(bucket ...

  6. vs code 插件收集

    名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 ...

  7. js的浅复制和深复制

    1.浅复制VS深复制 本文中的复制也可以称为拷贝,在本文中认为复制和拷贝是相同的意思.另外,本文只讨论js中复杂数据类型的复制问题(Object,Array等),不讨论基本数据类型(null,unde ...

  8. 给RadioButtonList绑定Selected的值

    有一个案例,是读取Excel的资料显示于ASP.NET的GridView控件.在GridView控件中,有一列是用RadioButtonList来显示性别信息(男或女). 另外来看看Excel的数据: ...

  9. Js的substring和C#的Substring

    Js的substring 语法: 程序代码String.substring(start, end) 说明:返回一个从start开始到end(不包含end)的子字符串. 示例: 程序代码var str= ...

  10. 语义化版本控制规范(SemVer)

    参考链接 https://semver.org/lang/zh-CN/ 语义化版本 2.0.0 (透过版本号的改变来传达信息.) 摘要 版本格式: 主版本号.次版本号.修订号 版本号递增规则如下: 1 ...