Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest.

Takeway:

  1. Inline: Can NOT add height and width. But can add margin and padding
  2. Inline-block: Can add height, width, margin and padding. Not take the whole row.
  3. Block: Can add height, width, margin and padding, take the whole row.
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <p>Here is some text in a paragraph tag, a paragraph tag has a dispay property of block by defualt. <span class="inline">A span is inline by defualt</span> but with some styling we can make it <span class="inline-block">inline-block</span>.  Inline block will respect top and bottom margins and padding. We can also make it <span class="block">block</span> by adding classes and styling them.</p>

</body>

</html>
.box {

  border: 1px solid black;

  margin: 5px;

  display: block;

}

p {

  border: 1px solid black;

}

.inline {

  border: 1px solid blue;

  display: inline;

  margin-left: 10px;

  margin-right: 50px;

  padding-left: 10px;

  padding-right: 50px;

  margin-top: 50px;

  width: 500px; // Doesn't work

  height: 200px; // Doesn't work

}

.inline-block {

  border: 1px solid red;

  display: inline-block;

  margin-right: 20px;

  width: 200px;

  height: 50px;

}

.block {

  display: block;

  border: 1px solid green;

  width: 50px;

  height: 100px;

}

[CSS3] CSS Display Property: Block, Inline-Block, and Inline的更多相关文章

  1. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  2. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  3. CSS——display（Block none inline等）属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  4. css display block 和 inline

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  5. display的block、none、inline属性及解释

    常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...

  6. css display属性详解

    css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...

  7. CSS display:inline-block

    CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...

  8. [转]CSS Display(显示) 与 Visibility（可见性）

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  9. CSS Display(显示) 与 Visibility（可见性）

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...

随机推荐

  1. UVALive 4043 Ants

    KM   构图求最小权值匹配 保证最小的权值,所连的边一定是能够不相交的. Ants Time Limit: 3000MS   Memory Limit: Unknown   64bit IO For ...

  2. javascript将毫秒还原为可读时间格式

    <script type="text/javascript"> //随便设置一个时间 var otime = new Date("2015-11-11 20: ...

  3. sealed 修饰符

    当对一个类应用 sealed 修饰符时,此修饰符会阻止其他类从该类继承. 在下面的示例中,类 B 从类 A 继承,但是任何类都不能从类 B 继承. class A {} sealed class B ...

  4. vim搜索后跳到下(上)一个

    搜索高亮后, 跳到下一个:小写n 上一个:大写N

  5. hdu 1009 贪心基础题

    B - 贪心 基础 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:32768KB     64bi ...

  6. 移动web前端的一些硬技能（一）关于移动设备

    移动端web其实也就是小尺寸触摸屏设备的web,其中包含了两个词——1.小尺寸设备:2.触摸屏.能把这两个问题给解决掉,就已经是一个基本合格的移动web前端开发工程师了.对于前端工程师来说,前路漫漫, ...

  7. github多人协作

    1.字符串处理(编码原理) git clone git@github.com:lookphp/LaravelCms.git git add . git commit -m "修改的内容-需要 ...

  8. 【7】python核心编程 第十一章-函数和函数式编程

    1.*函数(与方法)装饰器 装饰器背后的主要动机源自python 面向对象编程.装饰器是在函数调用之上的修饰.这些修饰 仅是当声明一个函数或者方法的时候,才会应用的额外调用. 装饰器的语法以@开头,接 ...

  9. DataTables选择行并删除（删除单行）

    $(document).ready(function() { var table = $('#example').DataTable(); $('#example tbody').on( 'click ...

  10. Scala学习笔记--上界(<:)、视图界定(<%)、上下文界定(T:M)

    上界 下界 视界 object Test{ def main(args:Array[String]):Unit={ def mulBy(factor:Double)=(x:Double)=>fa ...