Div标签使用inline-block有间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.c1{
width: 249px;
height: 1000px;
background-color: gray;
display: inline-block; }
.c2{
width: 900px;
height: 1000px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div><!-- 注意观察这里的变化 -->
</body>
</html>
两个div设置行内块属性，内外边距已经设置为0了，但是两个div之间为什么还有间隙呢？修改如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.c1{
width: 249px;
height: 1000px;
background-color: gray;
display: inline-block; }
.c2{
width: 900px;
height: 1000px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="c1"></div><div class="c2"></div><!-- 注意观察这里的变化 -->
</body>
</html>
将body中的连个div设置为一行就可以了。
Div标签使用inline-block有间距的更多相关文章
- 块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）
<html> <head> <meta charset="utf-8"> <title>块级标签</title> < ...
- CSS单元的位置和层次-div标签
我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情.我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化. 而CSS ...
- 关于p标签不能嵌套div标签引发的标签嵌套问题总结
问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...
- div标签嵌套原则详解（转载）
这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span ...
- 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...
- div标签的理解
在HTML里面,div标签是一个块状元素,不会和其他元素排列在同一行,会默认和下面的元素换行,但是如果我们需要把几个div标签排在同一行,需要怎么做? 第一种:修改块状元素 源码: <div i ...
- HTML <div> 标签
定义和用法: <div> 可定义文档中的分区或节(division/section). <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用 ...
- <div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑
需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<texta ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- QT的编译原理
https://www.cnblogs.com/findumars/p/4948896.html
- 配置docker容器上ssh无密登录
配置docker容器上ssh无密登录 1.修改所有容器中root账户密码 ssh到远程主机时,首次需要密码访问,因此需要修改root账号密码. 密码必须要8位以上字母数字混合. $>passwd ...
- 容器，Docker, Kubernetes和Kyma，以及Kyma对SAP的意义
大家好,今天非常高兴能给大家做一个关于Kyma的技术分享.这个session的audience主要是针对使用咱们成都研究院使用Java和nodejs等技术栈做微服务开发的同事们.对于在ABAP net ...
- 迷宫问题求解——C++
迷宫问题思路 根据昨天的博客,有如下几种解决方案 克鲁斯卡尔 ,为避免死循环,需要设定优化路径的次数. Prim,为避免死循环,需要设定优化路径的次数,暂定200次. BFS , 实现简单,无死循环. ...
- 分享一个SqliteHelper类
分享一个SqliteHelper类 SQLite作为一个本地文件数据库相当好用,小巧.快速.支持事务.关系型,甚至可以运行在Android上.在很久以前的一个项目中,我们用过它来将接收到的数据做本地统 ...
- Jenkins报错Caused: java.io.IOException: Cannot run program "sh" (in directory "D:\Jenkins\Jenkins_home\workspace\jmeter_test"): CreateProcess error=2, 系统找不到指定的文件。
想在本地执行我的python文件,我本地搭建了一个Jenkins,使用了execute shell来运行我的脚本,发现报错 [jmeter_test] $ sh -xe D:\tomcat\apach ...
- 字符串拼接+和concat的区别
+和concat都可以用来拼接字符串,但在使用上有什么区别呢,先来看看这个例子. public static void main(String[] args) { // example1 String ...
- html style标签
<div id="d1">或者<div class="d1">在css下定义id的函数前缀是#,定义class前缀是.css代码就可以这 ...
- WK 与 JS 的那些事
苹果在iOS 8中推出了 WKWebView,这是一个高性能的 web 框架,相较于 UIWebView来说,有巨大提升.本文将针对 WKWebView 进行简单介绍,然后介绍下如何和 JS 进行愉快 ...
- reactnative 原生组件通信原理
http://www.csdn.net/article/2015-11-27/2826345-compare-React-Native-with-ExMobi 原生组件通信原理 React Nativ ...