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. Android实现程序前后台切换效果

    本文演示如何在Android中实现程序前后台切换效果. 在介绍程序实现之前,我们先看下Android中Activities和Task的基础知识. 我们都知道,一个Activity 可以启动另一个Act ...

  2. Android应用盈利广告平台的嵌入方法详解

    一.如何学习Android  android开发(这里不提platform和底层驱动)你需要对Java有个良好的基础,一般我们用Eclipse作为开发工具.对于过多的具体知识详细介绍我这里不展开,我只 ...

  3. iOS应用性能调优的25个建议和技巧【转】

    转载自:http://blog.jobbole.com/37984/ 首页 最新文章 资讯 程序员 设计 IT技术 创业 在国外 营销 趣文 特别分享 更多 > - Navigation -  ...

  4. nginx使用keepalived实现高可用

    环境: 主:linux-node1  110.0.0.137 备:linux-node2  110.0.0.138   VIP: 110.0.0.120   NGINX安装: # rpm -ivh h ...

  5. （转）AspNetPager查询分页问题（点击页码，不再是查询后的数据集）viewstate解决

    public string SQL = "select * from Memorandum";       protected void Page_Load(object send ...

  6. silverlight 双坐标轴

    public void CreateLine(Grid oGrid, string sTitle, string sTableName, bool ifGetSig, string sYUint, s ...

  7. （原）ubuntu16重装显卡驱动后，torch中的问题

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6030232.html 参考网址: https://github.com/torch/cutorch/i ...

  8. python 杂记

    class TestA(object): def __init__(self): print("A is initing"); def foo(self): print(" ...

  9. dobbo学习

    http://www.cnblogs.com/Javame/p/3632473.html 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以 ...

  10. juqery easy ui 实现二级菜单联动

    实现效果 代码: <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat= ...