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. js方法调用

    <!DOCTYPE html> <html> <head> <title>测试</title> </head> <body ...

  2. Linux 常用系统命令-20160504

    一.显示目录和文件的命令 1.ls(list)  功能说明: 列出目录内容. 语 法 : ls [-1aAbBcCdDfFgGhHiklLmnNopqQrRsStuUvxX][-I < 范 本 ...

  3. unbantu相关笔记

    很多项目使用的系统是centos或者redhat,最近有一个项目使用的系统竟然是阿里云unbantu,不知道他们负责人怎么想的,明明有centos,非要用unbantu.抱怨到此,unbantu的学习 ...

  4. iOS平台下cookie的使用

    iOS平台下cookie的使用 首先,先介绍下iOS对cookie的操作的两个类: 帖子来源于:http://blog.csdn.net/chun799/article/details/1720690 ...

  5. NFinal学习笔记（一）

    NFinal框架,最快的netWeb框架,其有三大特色,NFinalServer,NFinalBuild,NFinal代码生成器(生成web层) 首先学习了NFinalServer. NFinalSe ...

  6. c#读写cookie

    读 response.SetCokie(new HttpCookie("Color",TextBox1.Text);写 request.Cookies["color&qu ...

  7. rsync+inotify实时同步方案

    rsync+inotify实时同步,inotify可以实时监控本地文件或目录变化,当检测到本地文件变化,执行rsync同步命令,将变化的文件同步到其他服务器节点. 1.配置环境 3.在服务节点1.服务 ...

  8. Http Clinet使用

    Http Client是个apache下的一个开源包,用于使用http协议访问服务的java代码编写. Http Client的主要功能: (1)实现了所有 HTTP 的方法(GET,POST,PUT ...

  9. 我的django之旅（二）模板和静态文件

    我的django之旅(二)模板和静态文件 标签(空格分隔): django 1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个 ...

  10. Ibatis 后台打印完整的sql语句

    http://blog.csdn.net/deng11342/article/details/9122015 http://www.blogjava.net/libin2722/archive/200 ...