行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(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行内框(内联元素)的更多相关文章

  1. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  2. css 内联元素inline 行框全解

    首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...

  3. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  4. css 块状元素与行内元素(内联元素)的理解

    块状元素: 它一般是其他元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其他元素同一行的,即相当于两个块状元素写一起是垂直布局的.最常用的是div和p 行内元素: 行内元素又称内联元素,它只 ...

  5. css中块级元素、内联元素(行内元素、内嵌元素)

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  6. CSS中的块级元素、内联元素(行内元素)

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  7. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  8. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  9. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

随机推荐

  1. 【bzoj2763】[JLOI2011]飞行路线

    *题目描述: Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一 ...

  2. nuget push 程序包到nuget服务器时报错 406 (Not Acceptable)

    1.在window服务器上部署nuget服务器时,发布包时出现请求报错 406 (Not Acceptable) 验证用户名.密码正确的情况下,还是出现上面错误.后面跟踪服务器日志,发现window\ ...

  3. pycharm的个性化设置

    1. 调整背景颜色 file -- settings -- Editor -- Color Scheme 2. 调整字体.字号.行间距 file -- settings -- Editor -- Fo ...

  4. PHP mac localhost 环境下发送邮件

    转载自:http://mabblog.com/blog/2011/09/lion-smtp-postfix-relay-and-dreamhost/ When developing web-apps ...

  5. smartload跨浏览器极速缓存插件用法

    smartload由39smart团队原创,主要实现前端css/js的一次加载请求,永久缓存的加速效果,在移动端效果非常明显. 插件特点: 支持平台: PC和移动端所有版本浏览器,ie6+,firef ...

  6. WebView:是应用程序打开web网页的UI控件前台

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  7. 不知道Java类文件结构的同学,看这篇文章就够了

    一.前言 代码编译的结果从本地机器码转变为字节码,是存储格式发展的一小步,却是编程语言发展的一大步.经过多年的发展,目前的计算机仍然只能识别0和1,但是由于近10年内虚拟机以及大量建立在虚拟机之上的程 ...

  8. 挖矿病毒DDG的分析与清除

    注:以下所有操作均在CentOS 7.2 x86_64位系统下完成. 今天突然收到“阿里云”的告警短信: 尊敬的****:云盾云安全中心检测到您的服务器:*.*.*.*(app)出现了紧急安全事件:挖 ...

  9. tomcat8.5部署管理控制台

    1.修改 conf/tomcat-users.xml 文件 <role rolename="manager-gui"/> <role rolename=" ...

  10. Ubuntu15下Qt+libusb开发

    下载和安装libusb-1.0 在Ubuntu15中可以从软件仓库安装libusb,当前的libusb版本为1.0.可以使用如下命令安装libusb的全部内容. $sudo apt-get insta ...