行内元素的特点有:

1、与其他元素在同一行

2、宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)不可设置

其实这4个属性是可以设置的,但是不建议设置。

如以下代码所示,给行内元素a设置

margin-top:20px;margin-right:20px; 样式中简写为margin:20px 20px 0 0;

padding-top:5px; padding-right:5px;样式中简写为padding:5px 5px 0 0;

代码如下:

  显示如下:图中的行内元素

   <a href="">北京</a>

黄色部分为margin、紫色部分为padding;红色线条为border;元素背景色为灰色。

可以看出margin-top和padding-top在边框以外。因为margin的背景色透明,因此margin-top的设置对行内元素的显示不影响;

而padding-top的背景色为灰色,可以看到下方的a元素的背景色会覆盖上方的a元素;如果a元素的背景色是透明色的话,那么padding-top值设置对行内元素的显示也不影响。

因此我们要记住:对于行内元素尽量不要设置margin-top、margin-bottom;padding-top、padding-bottom值;

运行结果如下:

结论是:margin-top  ,margin-bottom可以设置  ,只不过不影响布局,相当于失效;

img元素:

  内联块状元素,也属于行内元素,设置margin-top有效;

  (行内元素,会计元素都是盒模型,都可以设置margin,不过行内元素的上下margin在布局中体现不出来,不影响布局,并不是行内元素不可以设置上下margin)

行内元素的上下margin 和 img元素的上下margin的更多相关文章

  1. css变换transform 以及 行内元素的一些说明

    变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: transla ...

  2. [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...

  3. 移动端使用rem.js,解决rem.js 行内元素占位问题

    父级元素: letter-spacing: -0.5em;font-size: 0; 子级元素: letter-spacing: normal; display: inline-block; vert ...

  4. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  5. HTML开发之(块级标签,行内标签,行内块标签)

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  6. HTML基础知识(块级标签,行内标签,行内块标签)

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

  7. 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  8. 关于行内元素的margin padding一些说明;background-color的范围

    ①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果 ...

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

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

  10. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

随机推荐

  1. 实现简单的 JS 模块加载器

    实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...

  2. 2D TOOLKIT备忘录

    通过Clip名称更改动画片段 // 通过clip名称获取clip实例 tk2dSpriteAnimationClip clip = childrenAnimator.GetClipByName(&qu ...

  3. umi ui 构建时出现 spawn sh ENOENT 报错的解决方法

    在使用umi可视化界面构建项目的时候,如果出现spawn sh ENOENT错误,一般都是由于环境变量里没有设置git的环境变量导致的.在环境变量的path里加上"C:\Program Fi ...

  4. eclipse出错

    程序初次build project没有问题,代码没有做任何修改再次build project却出现了make[1]: ***这样的错误,这是为什么?尝试过修改一点代码后重新编译也可能出现make[1] ...

  5. 传奇服务端添加双倍经验卷的方法 双倍经验卷轴DB示例展示

    第一步我们在DBC数据库中添加好双倍经验卷轴DB,以下是现成的双倍经验卷DB,导入到DB里面就可以了. 222;双倍经验卷;31;0;1;20;0;0;265;0;0;0;0;0;0;0;0;0;0; ...

  6. 利用AJAX JAVA 通过Echarts实现豆瓣电影TOP250的数据可视化

    mysql表的结构   数据(数据是通过爬虫得来的,本篇文章不介绍怎么爬取数据,只介绍将数据库中的数据可视化):   下面就是写代码了: 首先看一下项目目录:   数据库层   业务逻辑层   pac ...

  7. CTF_论剑场 头像

    首先打开链接发现这个链接是一个头像 然后下载这个头像 通过hxd分析一下 在编辑中查找 flag 然后发现flag是一个用base64 加密的一串文字 然后我们将这串文字 解密 然后再通过md5 32 ...

  8. nginx的负载均衡配置

    1.下载nginx的压缩包,可以去官网下载 2.解压缩,可以看到其中有个conf的文件夹,在该目录中,nginx.conf配置文件就是核心配置文件 3.默认配置 #user nobody; worke ...

  9. ASA升级

    1.开启TFTP server,并且保证设备和TFTP server可达.2.上传镜像文件到ASA:ciscoasa# copy tftp: disk0: >>>>拷贝镜像到A ...

  10. HahMap相关问题

    概述 文章对HashMap的部分细节进行介绍,JDK1.7之前有可能出现环形表的问题,而1.7之后进行了改进,文章对环形表现象的出现进行了解析,然后对HashMap注意的几个问题进行了解答. Hash ...