<!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有间距的更多相关文章

  1. 块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）

    <html> <head> <meta charset="utf-8"> <title>块级标签</title> < ...

  2. CSS单元的位置和层次-div标签

    我们都知道,在网页上利用HTML定位文字和图象是一件“令人心痛”的事情.我们必须使用表格标签和隐式GIF图象,即使这样也不能保证定位的精确,因为浏览器和操作平台的不同会使显示的结果发生变化. 而CSS ...

  3. 关于p标签不能嵌套div标签引发的标签嵌套问题总结

    问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...

  4. div标签嵌套原则详解（转载）

    这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span ...

  5. 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

    我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...

  6. div标签的理解

    在HTML里面,div标签是一个块状元素,不会和其他元素排列在同一行,会默认和下面的元素换行,但是如果我们需要把几个div标签排在同一行,需要怎么做? 第一种:修改块状元素 源码: <div i ...

  7. HTML <div> 标签

    定义和用法: <div> 可定义文档中的分区或节(division/section). <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用 ...

  8. <div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑

    需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<texta ...

  9. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  10. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. FZEasyFile的使用

    FZEasyFile的使用 https://github.com/jiecao-fm/FZEasyFile 操作沙盒文件很恶心,但用上FZEasyFile就变得简单了. 以前你需要这么做才行: NSF ...

  2. PHP-Gealman

    一.简介 Gearman是一个分发任务的程序框架,它会对作业进行排队自动分配到一系列机器上.gearman跨语言跨平台,很方便的实现异步后台任务.php官方收录:http://php.net/manu ...

  3. June 26th 2017 Week 26th Monday

    I am a little tempted, but so afraid to look in your eyes. 我对你有一点动心,却如此害怕看你的眼睛. Now that you are tem ...

  4. 条件独立(conditional independence) 结合贝叶斯网络(Bayesian network) 概率有向图 （PRML8.2总结）

    转:http://www.cnblogs.com/Dzhouqi/p/3204481.html本文会利用到上篇,博客的分解定理,需要的可以查找上篇博客 D-separation对任何用有向图表示的概率 ...

  5. [原]Ping azure

    最近在azure上开了一个虚拟机(大陆世纪互联的),发现竟然不能ping虚拟机! 查了一下资料发现原来azure不支持被ping这个功能(貌似是不开放ICMP-in这个协议),有些用户跟客服问过这个问 ...

  6. 零售企业ERP系统慢

    数据库优化案例 https://www.cnblogs.com/double-K/p/9210982.html 写在前面 记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是 ...

  7. [零基础学JAVA]Java SE基础部分-02.标识符、数据类型

    转自:http://redking.blog.51cto.com/27212/114976 1.课程名称:标识符.数据类型 本季介绍了Java中的标识符的命名规则,各种关键字及数据类型的划分,并对各种 ...

  8. 有趣的IntegerCache

    一个很有趣的现象,下面这两个结果输出的结果是false true,这是为什么?   翻看Integer的源码可以看到,当new Integer(12);时,没有什么特别的,就是通过构造方法创建了一个I ...

  9. 通过渲染器Shader实现图像变换效果

    在上一篇文章中,一起学习了通过设定画笔风格来实现图形变换,没读过的朋友可以点击下面链接: http://www.cnblogs.com/fuly550871915/p/4886455.html 是不是 ...

  10. Powershell split file

    #网上所得非原创 function split($inFile, $outPrefix, [Int32] $bufSize){ $stream = [System.IO.File]::OpenRead ...