[CSS3] CSS Display Property: Block, Inline-Block, and Inline
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:
- Inline: Can NOT add height and width. But can add margin and padding
- Inline-block: Can add height, width, margin and padding. Not take the whole row.
- 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的更多相关文章
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- CSS——display（Block none inline等）属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- css display block 和 inline
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
- CSS display:inline-block
CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...
- [转]CSS Display(显示) 与 Visibility（可见性）
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
随机推荐
- c++11 NULL、0、nullptr
C的NULL 在C语言中,我们使用NULL表示空指针,也就是我们可以写如下代码: int *i = NULL;foo_t *f = NULL; 实际上在C语言中,NULL通常被定义为如下: #de ...
- Javascript基础Function
函数声明与表达式 function someFunc(){ alert("这是一个函数"); } var func=function(){ alert("函数表达式&qu ...
- JavaScript基础学习
什么是变量! 什么是变量?从字面上看,变量是可变的量;从编程角度讲,变量是用于储存某种/某些数值的存储器.我们可以把变量看做一个盒子, 为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX ...
- 解决Android AVD启动报错问题
好不容易从ADT Bundle转为Android Studio的开发环境,一路荆棘,现在又遇到了模拟器的问题,本来直接用真机调试程序会更快些,但是为了模拟多种系统不得不开启AVD. 废话不说,问题和解 ...
- 视图中的Layout使用(转)
1.母板页_Layout.cshtml 类似于传统WebForm中的.master文件,起到页面整体框架重用的目地 1.母板页代码预览 1 <!DOCTYPE html> 2 <ht ...
- 查看kafka的group.id
kafka/config目录下的consumer.properties中可以看到
- struts 2 --SEVERE: Could not find action or result
SEVERE: Could not find action or result There is no Action mapped for namespace / and action name . ...
- 7 RandomAccessFile读取文件内容保存--简单例子（需要验证）
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.io.*; /** * 读取动态产生的文件内容 */ publ ...
- Python爬虫——抓取糗百段子
在别人博客里学习的 抓取糗百段子,由于糗百不断的更新,代码需要改正. 抓取网页:http://www.qiushibaike.com/hot/page/1 修改后的代码如下: # -*- coding ...
- MFC多线程编的可能
1. 之所以是“可能”,因为这里有个重点就是临时对象是HWND操作的封装,不是窗口类的封装.因此所有的HWND临时对象都是CWnd的实例,即使上面强行转换为CAbcDialog*也依旧是CWnd*,所 ...