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权威指南>, ...
随机推荐
- GIL与event事件讲解
一.GIL全局解释器锁 global interpreter lock 1.GIL是一个互斥锁:保证数据的安全(以牺牲效率来换取数据的安全),阻止同一个进程内多个线程同时执行(不能并行但是能够实现并发 ...
- 前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片(没有笑声的一天就是被荒废的一天)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可 ...
- Oracle开发:常用的数据库字段类型[转]
Oracle常用的数据库字段类型如下: 字段类型 中文说明 限制条件 其它说明 CHAR 固定长度字符串 最大长度2000 bytes VARCHAR2 可变长度的字符串 最大长度4000 bytes ...
- javadoc生成文档
标签(空格分隔): javadoc java生成html的文档: 要生成注释文档html格式,java里面提供一个工具:javadoc 例如: javadoc -d myhelp -author -v ...
- sock( ) bind( ) connect( )
Linux下的socket()函数 调用头文件<sys/socket.h>中的socket函数 int socket(int af, int type, int protocol); 1) ...
- 接入集团auth流程
前言 一直对集团的auth系统很感兴趣,所以这次记录下接入集团auth的流程.如果后期有时间,会补充具体的auth实现细节. 正文 一.实现思想 1. 实现思想 明确几个名词:接入方,管理方.接入方指 ...
- java kryo序列化与反序列化
https://blog.csdn.net/lan12334321234/article/details/84907492 问题: https://blog.csdn.net/baidu_384041 ...
- Advanced Message Queuing Protocol ( 1 ) 概述
The Advanced Message Queuing Protocol (AMQP)是一个标准开放的应用层的消息中间件(Message Oriented Middleware)协议.AMQP定义了 ...
- vue树状结构(tree)
<!DOCTYPE html> <html> <head> <title></title> <style> body { fon ...
- Delphi驱动方式WINIO模拟按键 可用
http://www.delphitop.com/html/yingjian/152.html Delphi驱动方式WINIO模拟按键 作者:admin 来源:未知 日期:2010/2/1 1:14: ...