block,inline,inline-block的区别
最近正在复习，紧张地准备几天后的笔试，然后刚好看到这个地方。
block：块级元素，会换行，如div,p,h1~h6,table这些，可以设置宽高；
inline:行内元素，不换行，挤在一行显示，如span,a,i,em,strong,mark,input,button之类,不能设置宽高。
inline-block:行内块级元素，本质还是块级元素，可以设置宽高，只不过多了一个挤在一行显示的特性，但是这种特性会有一个问题，就是会有一个默认间距。
下面贴个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试界面</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
} .div{
display:inline-block;
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
line-height: 100px;
font-size: 25px;
border:1px solid #000;
} </style>
</head>
<body>
<div class="div">111</div>
<div class="div">222</div>
<div class="div">333</div> </body>
</html>
可以看到是有默认间隙的，而要去除这种间隙的方法我目前知道两种，一种是在其父级容器中将font-size设置为0，另外一种则是将自身设置为浮动；选用任意一种方法后，默认间距都消失不见了。
另外还有一个很容易被忽略的问题，就是对于行内元素来说，无论是padding还是margin，都是只有左右的真实有效，而上下的是无效的。把上面代码改一下，换成一堆span元素，并设置每个元素的margin为30px;去掉line-height，代码如下：
.span{
margin: 30px;
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
font-size: 25px;
border:1px solid #000;
}
可以看到最后的效果是这样的：
block,inline,inline-block的区别的更多相关文章
- display：inline、block、inline-block 的区别
一.块级元素 与 行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- block, inline和inline-block的区别
display:block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1& ...
- display:inline-block，block，inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- 2017-08-20 block，inline和inline-block概念和区别
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别（摘抄）
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block的区别 摘】
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- github网站介绍、并使用git命令管理github(详细描述)
本章学习: 1)熟悉github网站 2)通过git命令远程管理github, 3)git命令使用ssh key密钥无需输入账号密码 1.首先我们来熟悉github网站 1.1 注册github 登录 ...
- Linux中rpm命令用法听语音
rpm 是红帽(RedHat)软件包管理工具,实现类似于 Windows 中的添加/删除程序功能.下面,就来向大家介绍 rpm 命令的用法. 工具/原料 CentOS 一.rpm常用参数 1 rpm ...
- AVAudioPlayer与MPMusicPlayerController的区别
播放在App中的音频时,使用AVAudioPlayer 播放音乐库中的文件时,使用MPMusicPlayerController
- NSMutableArray 记住取不到时要进行强转
NSMutableArray 记住取不到时要进行强转
- mybatis_SQL缓存(5)
<settings> <!-- 这个配置使全局的映射器启用或禁用缓存 --> <setting name="cacheEnabled" value=& ...
- maven 阿里云仓库配置
<!-- 设定主仓库,按设定顺序进行查找. --> <repositories> <repository> <id>nexus-aliyun</i ...
- 用C＃编写Linux守护进程
如果要在Red Hat Enterprise Linux上将.NET Core进程作为后台进程运行,则可以创建自定义systemd单元.今天我将为.NET Core编写两个自定义系统单元的例子.一个是 ...
- 第一个ServiceStack服务框架
第一个ServiceStack服务框架 最近刚接触ServiceStack,就尝试着写了第一个服务框架,难免出错,还望同道们多多指正. 关于ServiceStack相关的概念不在做详细的叙述,网上研究 ...
- Android_基础控件
目录 一.文本控件TextView 二.按钮控件Button 三.图片控件ImageView 四.输入控件EditText 一.文本控件TextView 1.布局文件 <TextView and ...
- 关于oracle视图小结
关于oracle的视图小记:一. 视图:就是对SQL语句的封装,使用起来更方便.不易出错 优点: 1.简化数据操作:视图可以简化用户处理数据的方式 2.着重于特定数据:不必要的数据或敏感的数据可以 不 ...