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权威指南>, ...
随机推荐
- linux系统安装步骤
在虚拟机安装OEL linux 6.5图解(64位) 一,搭建虚拟机环境 虚拟机环境建议10.0版本及以上 可以从官网上下载OELlinux的安装包,http://www.oracle.com 打开虚 ...
- linux服务器在线测速
cd /tmpwget https://raw.github.com/sivel/speedtest-cli/master/speedtest.py或者wget https://raw.githubu ...
- [HDU3072]:Intelligence System(塔尖+贪心)
题目传送门 题目描述 “这一切都是命运石之门的选择.”试图研制时间机器的机关SERN截获了中二科学家伦太郎发往过去的一条短 信,并由此得知了伦太郎制作出了电话微波炉(仮).为了掌握时间机器的技术,SE ...
- Linux shell - 找到进程pid,然后杀掉(jps, grep, awk)
在应用服务器上,启动一个应用程序F3后,一直挂着,如果想要关闭它话,可以使用jps找到它的pid,然后,使用kill命令杀掉这个pid,例如: $> jps 17337 Jps 6660 Mai ...
- C#调用windows API实现 smallpdf客户端程序进行批量压缩
一.背景 Smallpdf 网站针对PDF文件提供了非常齐全的功能:PDF 与 Word.PPT.Excel.JPG 的相互转化.PDF 的压缩.编辑.合并.分割.解密.加密等功能,用户无需注册即可免 ...
- Mybaits配置多个数据库操作sql环境
mybitas可以配置sql语句适用于不同数据库下的操作,因为不同数据库sql语句可能有差别,接下来介绍如果进行操作 1.在jdbc.properprites配置驱动 jdbc.driver=com. ...
- Python locals() 的陷阱
转载自https://segmentfault.com/a/1190000012724861 在工作中, 有时候会遇到一种情况: 动态地进行变量赋值, 不管是局部变量还是全局变量, 在我们绞尽脑汁的时 ...
- python语言优势
与Java等语言比较起来,最大优点是语法很简洁,很多功能像octave和matlab,能够对数组或矩阵进行高效处理. 比如一个数组求和,这里只要一句话sum(a),Java等语言就需要循环.还有矩阵的 ...
- 3D聚类
1 3D聚类和普通的二维聚类实质一样,只不过维数太高了,用三维图来表示了. 下面将官网的改成只生成一个图了 #!/usr/bin/python # -*- coding:utf-8 -*- print ...
- 【疑难杂症】Firefox 火狐浏览器 抓不到本地数据包
日期:2019-05-17 23:28:11 介绍:火狐浏览器,如何才能够抓到本地(127.0.0.1)的数据包? 0x01.问题描述 在 Firefox 上安装了证书,浏览器也可以正常抓取互联网的 ...