行内元素内边距对左右下起作用,外边距只对左右起作用

*{margin:0;padding:0;}
.s1{background:#f00;margin:20px;}
.s3{background:#ff0;padding:20px;}
.s4{background:#00f;padding:0 20px;}
<span class="s1">03月26日</span><span class="s2"></span><span class="relatv s3">管理级线下案例培训第一天</span>
    或者
<span class="s1">02月03日</span>
<span class="s2"></span>
<span class="relatv s3">111</span>
<span class="relatv s4">222</span>

.s1的外边距:左右起作用,上下未起作用

.s3的内边距:明显可以看出上边距没起作用

参考:

http://www.qdfuns.com/notes/26090/795e5a3545adf6d045e65c9cf2c93f74.html

时间: 2024-11-06 01:05:14

行内元素内边距对左右下起作用,外边距只对左右起作用的相关文章

前端基础一:Doctype? 行内元素和块级元素

问题1:Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. 该标签可声明三种 DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 以下面这个 <!DOCTYPE> 标签为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

Web前端技术:CSS部分深入---盒子模式,overflow属性,border属性,内外边距,水平居中问题,块\行内元素,浮动,层定位

1.盒子模式:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间 2.overflow属性 hidden:超出部分不可见,默认值 scroll:显示滚动条 auto:如果有超出部分,显示滚动条 3.border属性 border-width:px \ thin \ medium \ thick border-style:dashed \ dotted \ solid \ double border-color:颜色 border:width  style color 案例 水平分割线: .

html行内元素转换为inline-block元素换行产生边距

今天再次遇到行内元素转换为inline-block后换行产生距离的问题(也许不止有行内元素,其他的没有遇到),然后就找了一个解决办法,原文可以参考http://www.cnblogs.com/PeunZhang/archive/2012/09/28/2706094.html 我也总结一下 结构:<div class="span-wrap"> <span>字符产生间距</span> <span>字符产生间距</span> <

块级元素和行内元素的区别 (block vs. inline)

块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了width属性,仍然独占一行. 可以设置margin, padding. 行内元素 (display: inline) HTML元素分为替换元素和非替换元素. 替换元素是指浏览器根据其标签的元素与属性来判断显示具体的内容.例如img,input等. HTML中大多数元素是不可替换元素,他们将内容直接告

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素

块级元素和行内元素

块级元素和行内元素的区别 1.块级元素(block element)块级元素会独占一行,默认情况下宽度自动填满其父元素宽度.   行内元素(inline element)行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 2.块级元素是可以设置宽高,而行内元素不可以. 3.块级元素可以设置外边距(margin),内边距(padding).   行内元素水平方向的margin-left; margin-right; padding-left; padding-right;

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元

行内元素和块级元素水平及垂直居中

首先,介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置. 行内元素: ①不占据一整行,随内容而定,有以下特点: ②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变. ③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用. ④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用. 常用的内联元素有: a - 锚点,b - 粗体(不推荐),

HTML 行内元素和块级元素的理解及其相互转换

块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格)... 特点:1.块级元素会独占一行,其宽度自动填满其父元素宽度. 2.可以设置width,height属性.(即使设置了宽度,也是独占一行的,除非用float属性等特殊情况) 3.可以设置margin(外边距)和padding(内边距). 行内元素:span, strong, em, br, img,