CSS行内框(内联元素)
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
示例如下:
<p>这是一个段落</p>
<p><span>这是一个内联元素</span><span>这是第二个内联元素</span></p>
设置样式如下:
p{ margin:0;}
显示如下:
设置样式如下,可验证上述结论:
p{
margin:0px;
}
p span{
/* 水平外边距可以调整行内框间距 */
margin-left:50px;
/* 水平内边距可调整行内框间距,垂直内边距不影响行内框的高度 */
padding:20px;
/* 垂直外边距不影响行内框的高度 */
margin-top: 20px;
/* 设置行内框的高度 */
line-height: 50px;
/* 以下属性便于显示 */
background-color: tomato;
opacity: 0.8;
}
效果如图:
CSS行内框(内联元素)的更多相关文章
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- css 内联元素inline 行框全解
首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- css 块状元素与行内元素(内联元素)的理解
块状元素: 它一般是其他元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其他元素同一行的,即相当于两个块状元素写一起是垂直布局的.最常用的是div和p 行内元素: 行内元素又称内联元素,它只 ...
- css中块级元素、内联元素(行内元素、内嵌元素)
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- CSS中的块级元素、内联元素(行内元素)
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
- Code笔记之:CSS块级元素、内联元素概念
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
随机推荐
- 【HDU6667】Roundgod and Milk Tea【贪心】
题目大意:给你ai,bi,限制ai不能流向bi,求最大流 题解:贪心,对于第i个班级,考虑前i-1个班级匹配完剩余多少a,b,将这些ab对第i个班级进行贪心匹配 匹配完若第i个班级还有剩余的ab,考虑 ...
- 微信长按识别二维码,在 vue 项目中的实现
微信长按识别二维码是 QQ 浏览器的内置功能,该功能的基础一定要使用 img 标签引入图片,其他方式的二维码无法识别. 在 vue 中使用 QrcodeVue 插件 demo1 在 template ...
- [BZOJ5463][APIO2018]铁人两项:Tarjan+圆方树
分析 根据题目中的要求,从\(s\)出发前往\(f\)一定可以,并且只可能经过这两个结点所在的点双连通分量和它们之间的点双连通分量,因此切换点\(c\)只能从这些点中选取. 建出圆方树后,因为圆方树上 ...
- Spring Cloud云架构 - SSO单点登录之OAuth2.0 登出流程(3)
上一篇我根据框架中OAuth2.0的使用总结,画了一个根据用户名+密码实现OAuth2.0的登录认证的流程图,今天我们看一下logout的流程: /** * 用户注销 * @param accessT ...
- sublime text3安装格式化代码插件
1.代码提示插件:sublimeCodeIntel a)在Sublime Text 3中,按下Ctrl+Shift+P调出命令面板;b)输入install 调出 Install Package 选项并 ...
- [BZOJ2427]:[HAOI2010]软件安装(塔尖+DP)
题目传送门 题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用${W}_{i}$的磁盘空间,它的价值为${V}_{i}$.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件 ...
- Python 爬虫如何入门学习?
"入门"是良好的动机,但是可能作用缓慢.如果你手里或者脑子里有一个项目,那么实践起来你会被目标驱动,而不会像学习模块一样慢慢学习. 另外如果说知识体系里的每一个知识点是图里的点,依 ...
- EventBus-实现java状态机
摘自:https://www.jianshu.com/p/8def04b34b3c 首先,了解状态机是什么,我们为什么需要状态机! 举个最简单例子,请假,作为一个最底层程序员,每次请假都要领导层层审批 ...
- KVM 常用命令
显示虚拟机 virsh list --all 停止虚拟机 virsh destroy <name> 启动虚拟机 virsh start <name> 删除虚拟机 virsh u ...
- EDM案例讲解:Mouth foods的EDM邮件营销
你可能没有听说过Mouth foods,它是一个美味产品的在线市场.作为一个日益增长的企业,他们知道电子邮件的重要性,因为在此之前他们通过电子邮件真正找到了企业品牌中的自我,这就是为什么他们认为电子邮 ...