html中元素分为三种：块级元素、行内元素（也叫内联元素），内联块级元素。

常用块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）

常用内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用内联块元素：<img>、<input>

内联块级元素特点：（同时具备内联元素、块级元素的特点）

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置！

首先行内元素是否具有盒子模型？
答：行内元素同样具有盒子模型。

行内元素的padding、margin是否无效？
答：

  • 行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
  • 行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的
  • 行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。
<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        span{

            padding: 10px;

            margin: 20px;

            background-color: red;

        }

        div{

            background-color: yellow;

        }

    </style>

</head>

<body>

<div>nihzidao</div>

<span>nishi</span>>

<div>wozhidao</div>

从上图可以看出，sapn标签的padding-top和padding-bottom在显示效果上是增加的，但是和上下两个div标签并没有间距，说明padding-top、padding-bottom设置是无效的，margin-top和margin-bottom也是无效的，

padding-left、padding-right、margin-left、margin-right都是有效的。

总结：行内标签（也叫内联标签）的padding和margin左右设置有效，而padding上下有显示效果，但是设置无效，margin上下也是设置无效，显示也无效。

行内元素的padding和margin是否无效的更多相关文章

  1. 行内元素的padding和margin是否有效

    行内元素的纵向padding和margin都是不考虑的,这是css规范定义的.inline元素确实可以设置垂直方向的padding和margin值,但是inline元素的margin和padding的 ...

  2. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  3. 关于行内元素的margin padding一些说明；background-color的范围

    ①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果 ...

  4. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  5. CSS——行内元素的margin与padding

    行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效 例如span: <!DOCTYPE html> &l ...

  6. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  7. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

  8. CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片

    CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...

  9. css 行内元素和块级元素

    1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...

随机推荐

  1. Linux之解决每次git pull/git push都需输入密码设置

    操作命令: //执行这两条命令cd / git config --global credential.helper store 执行完命令之后会在.gitconfig文件中多加红色字体 [user] ...

  2. 347. Top K Frequent Elements (sort map)

    Given a non-empty array of integers, return the k most frequent elements. Example 1: Input: nums = [ ...

  3. HDU4801【DFS】

    参考:大牛博客 题意:  给你一个2阶魔方,给你24个数代表颜色,然后让你求在<=n次操作里面最多能搞出几面是一样的. 思路: 就是一个DFS嘛,就是怎么转搞出来: 上面: 22 23 4 0 ...

  4. 51nod1242【矩阵快速幂】

    基础题.. wa在n的范围需要用long long = =.长个记性 #include<bits/stdc++.h> using namespace std; typedef long l ...

  5. Codeforces712C【贪心】

    看了这篇.. http://blog.csdn.net/queuelovestack/article/details/52503162 直接就是从小到大,那么每次按最大的递增顺序上去,就是了. 因为每 ...

  6. hdoj5875【二分+RMQ】

    全部从我大哥那里学习得来.. 一开始硬着头皮就是根据思路上线段树,明知是T还要写(因为线段树还不是很熟,趁机练一发) 后来果然T了,然后就去学了一发RMQ的ST算法,查询是O(1). ST算法主要: ...

  7. Inside Geometry Instancing（上）

    Inside Geometry Instancing(上) http://blog.csdn.net/soilwork/article/details/598335 翻译:claymanclayman ...

  8. 51nod1640(kruscal)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1640 题意:中文题诶- 思路:kruscal 题目要求是在边权 ...

  9. PHP在cli模式下传参说明

    命令行下输入php -help会列出所有可用的参数,如下截图: -a 代表以交互式模式运行: -c 指定ph.ini -n 不使用任何php.ini配置 -d foo[=bar] 定义一个INI实体, ...

  10. load View 流程 程序启动流程

    基本流程: loadView / nib文件  来加载view到内存 -> viewDidLoad 函数进一步初始化这些view -> 内存不足时, 调用viewDidUnload 函数释 ...