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. DevExpress ASPxHtmlEditor控件格式化并导出Word (修复中文字体导出丢失)

    在前台页面中先插入一个ASPxHtmlEditor控件,名为ASPxHtmlEditor1. 我用的Dev版本为14.1 格式化文本 在后台插入如下代码  1     const string css ...

  2. C#扩展方法的理解

    “扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型.” 这是msdn上说的,也就是你可以对String,Int,DataRow,DataTable等这些 ...

  3. silverlight visifire控件图表制作——silverlight 后台方法页面事件

    1.返回事件 (1.返回silverlight页面,2.返回web页面) private void button_ClickBack(object sender, RoutedEventArgs e) ...

  4. mysql update语句，修改字段，，或者是批量修改字段

    更新一个字段,在它的后面加一个字符串,不查询数据库得到这个字段值 怎么添加?? 例如: 我的test表,有个user字段,我现在想在它后面加了另一个用户的名字 我在mysql数据库这样写 UPDATE ...

  5. 【Nutch2.2.1源代码分析之5】索引的基本流程

    一.各个主要类之间的关系 SolrIndexerJob extends IndexerJob 1.IndexerJob:主要完成 2.SolrIndexerJob:主要完成 3.IndexUtil:主 ...

  6. js过滤emoji表情符号

    手机端常常会遇到用户输入框,输入emoji,如果是数据库是UTF8,会遇到报错:SQLException: Incorrect string value: '\xF0\x9F\x98\x84' for ...

  7. ubuntu 执行apt-get update 提示无法获得锁

    问题如下: y@y:~$ sudo apt-get updateE: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)E: 无法对目录 /var/l ...

  8. 有关 sizeof和strlen的总结

    先看看sizeof() 一.sizeof的概念 sizeof是C语言的一种单目操作符,如C语言的其他操作符++.--等.它并不是函数.sizeof操作符以字节形式给出了其操作数的存储大小.操作数可以是 ...

  9. ps2keyboard demo code for 8052

    #pragma code symbols debug objectextend #include <reg51.h> /* special function register declar ...

  10. 《Programming WPF》翻译 第8章 3.Storyboard

    原文:<Programming WPF>翻译 第8章 3.Storyboard Storyboard是动画的集合.如果你使用了标记,所有的动画必须要被定义在一个Storyboard中.(在 ...