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& ...
随机推荐
- 解决无限 This file is indented with tabs instead of 4 spaces
File -> Settings -> Editor -> Code Style -> Java -> Tabs and Indents -> Use tab ch ...
- 阿里巴巴Java开发手册评
2016年底的时候阿里巴巴公开了其在内部使用的Java编程规范.随后进行了几次版本修订,目前的版本为v1.0.2版.下载地址可以在其官方社区-云栖社区https://yq.aliyun.com/art ...
- MyBatis 查询示例
环境搭建 数据库schema 1)datasource.xml配置 <?xml version="1.0" encoding="UTF-8"?> & ...
- beetl模板引擎使用笔记
maven项目pom: <dependency> <groupId>com.ibeetl</groupId> <artifactId>beetl< ...
- hive(II)--sql考查的高频问题
在了解别人hive能力水平的时候,不管是别人问我还是我了解别人,有一些都是必然会问的东西.问的问题也大都大同小异.这里总结一下我遇到的那些hive方面面试可能涉及的问题 1.行转列(列转行) 当我们建 ...
- 美国不同C段服务器，多ip服务器
作为多IP服务器的拓展,多C段服务器,例如:IP分为4段,A段,B段,C段,D段.192.168.0.1/24代表着一个C段,可用IP段为192.168.0.1-255,一个C段有253个可用IP.一 ...
- _0_web_基础
创:18_3_2017修:20_3_2017 什么是前端? --在浏览器中展示内容以及处理请求 什么是浏览器? --一款能将网页内容展现给用户查看,并且让用户与网页交互的软件 什么是内核? --渲染引 ...
- C语言学习之递归
学习C语言到递归时,还记得那个用来抛砖引玉的例子: "从前呀,有座山,山里有个老和尚给一个小和尚讲故事,讲的什么故事呢?从前呀,有座山,山里有个老和尚给一个小和尚讲故事,讲的什么故事呢?从前 ...
- ClearCase config_spec
1.使用分支前要在vob创建branch type,Config_Spec不能自动创建branch type: 2.如果可能,最好在以前确定的label上进行新的工作,避免维护复杂的config_s ...
- px、pt、em、rem 的区别
px(pixel) 像素,是屏幕上显示数据的最基本的点,表示相对大小(不同分辨率上px显示不同) pt(point) 印刷行业常用的单位(磅),等于1/72英寸,表示绝对长度 em em是相对长度单位 ...