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. 照猫画虎学gnuplot之简单介绍

    简单介绍:Gnuplot是一个命令行驱动的科学画图工具,可将数学函数或数值资料以平面图或立体图的形式画在不同种类终端机或画图输出装置上. 它是由Colin Kelley 和 Thomas Willia ...

  2. TPCC-UVA测试环境搭建与结果分析

    一.    准备 操作系统 :Linux, 内核版本2.6 需要软件:tpccuva-1.2.3, postgresql-8.1.15, gnuplot-4.2.5. tccuva是实现标准TPC-C ...

  3. 利用JConsole工具监控java程序内存和JVM

    一.找到java应用程序对应的进程PI 性能测试应用程序访问地址:http://192.168.29.218:7070/training/ 部署的应用服务器为tomcat6.028 启动tomcat服 ...

  4. LNMP优化

        LNMP优化 LNMP优化从系统安全,系统资源占用率,及web服务并发负载这三个方面体现,并   且主要体现在web服务并发负载这一方面.     1:首先进行linux优化加固  Linux ...

  5. oracle学习笔记（二）表的查询

    --oracle表的管理 --创建表 )); --删除表 drop table users; --创建表 ),xm ),sex ),birthday date,sal ,)); ),cnmae )); ...

  6. 华为 oj 公共子串计算

    水题,原来以为用dp数组  结果wrong了两次 我想还是自己小题大做了···呵呵·· 献给初学者作为参考 #include <stdio.h> #include <string.h ...

  7. （一）backbone - API入门

    初探 backbone采用MVC模式,本身提供了模型.控制器和视图从而我们应用程序的骨架便形成. Backbone.js 唯一重度依赖 Underscore.js. 对于 RESTful , hist ...

  8. EF 执行顺序--先删除在更新和添加

    public void AcceptAllChanges() { if (this.ObjectStateManager.SomeEntryWithConceptualNullExists()) { ...

  9. open_basedir restriction in effect. File() is not within the allowed path(s)

    目前发现eaccelerator安装之后如果php.ini中设置open_basedir将导致open_basedir的一些报错(open_basedir restriction in effect. ...

  10. centos在安装apache2.4版本的时候遇到ARP not found解决办法

    今日编译apache时出错: #./configure --prefix……检查编辑环境时出现: checking for APR... noconfigure: error: APR not fou ...