行内元素的上下margin 和 img元素的上下margin
行内元素的特点有:
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的更多相关文章
- css变换transform 以及 行内元素的一些说明
变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: transla ...
- [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...
- 移动端使用rem.js,解决rem.js 行内元素占位问题
父级元素: letter-spacing: -0.5em;font-size: 0; 子级元素: letter-spacing: normal; display: inline-block; vert ...
- CSS(3)---块级标签、行内标签、行内块标签
块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...
- HTML开发之(块级标签,行内标签,行内块标签)
显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...
- HTML基础知识(块级标签,行内标签,行内块标签)
块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...
- 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径
1 background(复合属性)与font(复合属性): background: 颜色 图片的链接 是否平铺 背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...
- 关于行内元素的margin padding一些说明;background-color的范围
①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果 ...
- margin和padding对行内元素的影响
这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
随机推荐
- Codeforces Round #614 (Div. 2) A-E简要题解
链接:https://codeforces.com/contest/1293 A. ConneR and the A.R.C. Markland-N 题意:略 思路:上下枚举1000次扫一遍,比较一下 ...
- codeforces 1269E K Integers (二分+树状数组)
链接:https://codeforces.com/contest/1269/problem/E 题意:给一个序列P1,P2,P3,P4....Pi,每次可以交换两个相邻的元素,执行最小次数的交换移动 ...
- Mysql高级操作
多数据插入 insert into 表名 [(字段名)] values(值列表1),(值列表2),... 主键冲突 主键冲突更新 主键冲突时,更新数据 insert into 表名 [(字段列表)] ...
- 使用Unity3d和C#的一些属性来设置特殊行为
使用 Unity 的C#语言 ,利用属性(Attribute)来类定义和变量定义或区分其他的变量,您可以设置一种特殊行为 例如,您添加[SerializeField]属性变量,私有变量标识序列化. [ ...
- Centos7下配置Apache的虚拟主机
一.虚拟主机 虚拟主机是Apache提供的一个功能,通过虚拟主机拉雅在一台服务器上部署多个网站.虽然服务器的IP地址是相同的,但用户当用户使用不同的域名访问时,访问到的是不同的网站. 下面讲解Apac ...
- pikaqiu练习平台(XSS(跨站脚本))
XSS(跨站脚本)概述 Cross-Site Scripting 简称为“CSS”,为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XSS可以分为如下几种常见类型: ...
- Jenkins - 基于 Docker 的 Jenkins 安装
概述 安装 Jenkins 基于 Docker 这个有点 水一发 的性质... 场景 学习 Jenkins 第一步, 当然是安装 但是 安装的方法 很多 Jenkins 是基于 Java 的 所以是个 ...
- 浅谈ABB机器人(工具坐标,工件坐标,有效载荷)
工具坐标(tool): 使tcl坐标偏移到工具上,例如焊接工作,使机器人工作点切入焊枪点上 mass:工具的重量 xyz:偏移距离的大小 验证:通过手动模式,切换至自定义工具,重定向 工件坐标(wob ...
- 概率DP (大概是最入门的题了) lightoj 1248
有一个骰子,n个面,问所有面都被摇出的期望. 转自**的博客, 因为概率是(n-k)/n 所以期望次数是1/(前面这个数) #include<cstdio> #include<a ...
- windows cmake与nmake
在Linux下编库经常会使用CMakeLists.txt文件,然后一个cmake 再一个make就可以编译出来. 在Windows下有cmake,但是cmake出来是一个Visual Studio工程 ...