行内元素的padding和margin是否无效
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是否无效的更多相关文章
- 行内元素的padding和margin是否有效
行内元素的纵向padding和margin都是不考虑的,这是css规范定义的.inline元素确实可以设置垂直方向的padding和margin值,但是inline元素的margin和padding的 ...
- 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
- 关于行内元素的margin padding一些说明；background-color的范围
①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- CSS——行内元素的margin与padding
行内元素: 1.margin:0 20px:只可以定义左右. 2.pading:20px 20px 20px 20px:上下左右都有效 例如span: <!DOCTYPE html> &l ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- CSS块级元素与行内元素
CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性. 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...
- CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片
CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...
- css 行内元素和块级元素
1. 块级元素默认在新行开始,如常见的div和p标签,行内元素默认在同行开始显示,如a,span标签 2.块级元素一般用于做容器,可容纳行内和块级元素,可设置width和height,行内元素只能容纳 ...
随机推荐
- 前端之CSS2
CSS盒子模型 CSS盒子模型介绍 盒子模型解释 元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式. 盒子模型示意图如下: 把元素叫做盒子 ...
- HDU2824【欧拉函数性质】
思路: 打表. 利用公式. 类似素数打表一样. #include<bits/stdc++.h> using namespace std; const int N=3e6+10; bool ...
- Unity3D - 动作动画忽略timeScale
http://blog.csdn.net/ynnmnm/article/details/46866347 最近在调战斗时的动画与特效,Unity3D对加/减速提供了Time.timeScale支持.但 ...
- DMOJ IOI '17 P3 - Toy Train【拓扑排序】
传送:https://dmoj.ca/problem/ioi17p3 参考:https://blog.csdn.net/qq_27327327/article/details/80711824 妙啊- ...
- [Xcode 实际操作]二、视图与手势-(2)UIView视图的层次关系
目录:[Swift]Xcode实际操作 本文将演示创建三个视图对象,其中第二个视图是第三个视图的父视图. 现在开始编写代码,实现这项功能 import UIKit class ViewControll ...
- iOS蓝牙传输数据演示-3
蓝牙传输数据演示 在上一小节中,我们一起开发了基于蓝牙通讯的工具类,该类中详细的实现蓝牙连接流程中的每一个环节 本小节我们就以给小米手环发送数据使其震动来演示我们工具类的用法 工具类本身具有通用性,属 ...
- C# 基础之构造函数
什么是构造函数? 构造函数主要用于创建类的实例对象,当调用一个构造函数创建对象时,构造函数会为对象分配内存空间并初始化类的成员. 构造函数分为:1.实例构造函数.2.静态构造函数 1.实例构造函数 使 ...
- HDU6301(2018多校第一场）
Bryce1010模板 http://acm.hdu.edu.cn/showproblem.php?pid=6301 队友AC的,没怎么看 #include<iostream> #incl ...
- 2017 Multi-University Training Contest - Team 1 Balala Power!
Talented Mr.Tang has n strings consisting of only lower case characters. He wants to charge them wit ...
- centos7版本对比之前版本的部分命令差异
centos7版本下的命令和之前的centos版本的命令有些许不同,最近在电脑上用VBox安装了一个centos7版本.在做一些网卡配置和安装mysql的时候遇到了一些问题.在这里总结跟大家分享下. ...