经过简单的测试，行内元素或者行内块元素的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. 【xsy2818】 最近点 动态树分治+可持久化线段树

    题目大意:给你一颗n个节点的树,最初点集S为空. 有m次操作:往当前点集S中加入/删除一个点,询问点x至集合S中任意点的最小距离,回到第t次修改点集的操作后的状态. 数据范围:$n,m≤10^5$ 我 ...

  2. POJ 2664

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 105 using na ...

  3. centos7.2 部署zabbix 3.2.7

    centos7.2 部署zabbix 3.2.7[zabbix@zabbixServer ~]$ cat /etc/redhat-release CentOS Linux release 7.2.15 ...

  4. CentOS7.x编译安装nginx，实现HTTP2

    网站使用HTTP2有助于网站加速及更安全,要配置HTTP2必须满足两个条件:①openssl的版本必须在1.0.2e及以上.②nginx的版本必须在1.9.5以上 一.准备工作  配置HTTP2之前需 ...

  5. (转)WebSphere的web工程中怎么获取数据源

    原文:http://aguu125.iteye.com/blog/1694313 https://blog.csdn.net/bigtree_3721/article/details/44900325 ...

  6. jieba分词(2)

    结巴分词系统中实现了两种关键词抽取法,一种是TF-IDF关键词抽取算法另一种是TextRank关键词抽取算法,它们都是无监督的算法. 以下是两种算法的使用: #-*- coding:utf-8 -*- ...

  7. 计算机网络 之 TCP和UDP的端口号解析

    前言:今天了解一下tcp和udp报文的端口.发现一直以来都只是知道端口用于区分同一IP的服务器的不同服务,已经端口的大小.在查找traceroute的资料的时候,才了解到一些之前没注意到的东西. (一 ...

  8. Maven 的基本配置与使用

    什么是Maven Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 发文时,绝大多数开发人员都把 Ant 当作 Java 编程项目的标准构 ...

  9. spring 后处理器

    Bean后处理器 新建maven项目并添加spring依赖,目录结构如下 Axe public interface Axe { public String chop(); } Person publi ...

  10. 第一章 Java Web工作原理

    一:在本章我们将学到如下的内容 >HTTP协议原理 >服务器端Web编程原理 >Servlet与Web容器 >Java Web应用程序的组成 >Tomcat介绍 一:1. ...