行级元素不能设置margin-top

2024-10-19

为什么行内元素不能设置margin-top/margin-bottom/padding-top/padding-bottom?

HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element).- 替换元素是指用作为其他内容占位符的一个元素.最典型的就是img,它只是指向一个图像文件.以及大多数表单元素也是替换,例如input等.- 非替换元素是指内容包含在文档中的元素.例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素. 讨论margin-top和margin-bottom对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨

内联(行级)元素不能设置margin-top

内联(行级)元素不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-right属性.如果需要设置行级元素的margin-top或margin-bottom属性,必须将行级元素转换成内联块级元素或块级元素.

HTML中块级行级元素小分类

行内元素列表: <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的文本方向 <big>大号字体加粗 <br>换行 <cite>引用进行定义 <code>定义计算机代码文本 <dfn>定义一个定义项目 <em>定义为强调的内容 <i>斜体文本效果 <img>向网页中嵌入一幅图像&

CSS 各类块级元素行级元素水平垂直居中问题

元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级行级水平垂直的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别行级元素一块级元素 1 水平居中: (也可利用负边距+绝对定位) element { margin: 0 auto; } 2.1垂直居中(元素高度已知): 利用负边距+绝对定位 .outside { width:720px; height: 720px; margin: 0 auto ; position: relative; /*祖先

学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

一.元素的块级与行级特性在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨论. 这里我们主要讨论display在CSS布局中涉及到主要属性值inline.block.inline-block三个特性状态. 通常我们在使用元素做页面布局设计时会说行级元素和块级元素,我们通常也遵循块级元素搭建页面设计架构,使用行级元素和行级块元素设计内容. 行级元素(内联元素inline)

CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题

元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级行级水平垂直的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别块级元素块级元素水平居中 1:margin: 0 auto element { margin: 0 auto; } 2:负边距+绝对定位 .outside { width:500px; height:200px; background-color: red; margin:100px auto; position: relative;

html块级元素和行级元素的区别和使用

行内.块状元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列. 3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(li

行内元素的上下margin 和 img元素的上下margin

行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)不可设置其实这4个属性是可以设置的,但是不建议设置. 如以下代码所示,给行内元素a设置 margin-top:20px;margin-right:20px; 样式中简写为margin:20px 20px 0 0; padding-top:5p

Html：行级元素和块级元素标签列表

块级元素 div p h1-h6 form ul ol dl dt dd li table tr td th hr blockquote address table menu pre HTML5: header section article footer 标签实现展示块级元素独占一行,当没有设置宽高时,它默认设置为100%( 其宽度自动填满其父元素宽度 ) 块级元素允许设置宽高,width.height.margin.padding.border都可控制 ( 注:块级元素设置了width宽

CSS中的块级元素与行级元素

最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底边距都是可以设置的. 3.元素的宽度如果不设置的话,默认为父元素的宽度. 常见的块级元素:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>

css ——行级元素与块级元素解析

一 . 先说说二者的本质区别吧: 行级元素是可以和其他元素处于一行,不用必须另起一行.块级元素是每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 二 .下面看看各自的特点: 块级元素 1.元素的高度.宽度.行高和顶底边距都是可以设置的. 2.元素的宽度如果不设置的话,默认为父元素的宽度. 3.块级元素即使设置了宽度,仍然是独占一行. 常见块级元素:address.blockquote.center.dir.div.dl.ul.ol.li.f

html行级元素和块级元素以及css转换

之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗. 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么事块级元素:行级元素指标签不加其他css,两个标签是横向排列:块级元素指标签不加其他css,两个标签是纵向排列. 以下是一些常见的行及元素和块级元素: 行级元素(inline element) a - 锚点 * em - 强调 * i - 斜体 * img - 图片 * input - 输入框 *

css的块级元素和行级元素

块级元素概念: 每个块级元素都是独自占一行. 元素的高度.宽度.行高和边距都是可以设置的. 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%) <address>//定义地址 <h3> //定义标题 <

html行级元素与块级元素以及meta标签的使用

块级元素的特性: 永远都会占满父级元素的宽度(块级元素的宽度永远都等于它父级元素的宽度) 行级元素的特性: 所占的空间刚好等于内容的大小常见的块级元素: h1~h6.p.ul.div.li.form 常见的行级元素: a.span.u.i.s.em.b.img(特殊的行级元素,可以修改尺寸) meta标签这也是一个key-value键值对形式的标签 <meta http-equiv="content-type" content="text/html" ch

HTML块级、行级元素，特殊字符，嵌套规则

如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类.元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%:行级元素与之相反,它的内容决定它的宽高度,至于特殊字符就当成是文字来看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&q

html语一化/块/行级元素

html文件不区分大小写.//vue项目中组件名字驼峰使用时候却全部小写说明不区分 html语义化的意思, 就是标签名带有一定含义和一些css样式.比如h1-h6是标题自动放大变粗,img是图片,table是表单等等,html5新增了一些header footer nav导航栏目便于程序员阅读,提高团队开发速度便于机器阅读,有利于seo(搜索引擎优化) //html文件中meta标签 mate name=keywords content=‘’ 关键字 mate name=decript

HTML <!DOCTYPE> 标签布局引用的几种方法行级元素与块级元素

HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</title> </head> <body> 文档的内容...... </body> </html> <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTM

块级元素或者行内元素在设置float属性之后是否改变元素的性质？

块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行行内元素使用float属性后,也是将其属性变成inline-block,可以设置宽高,padding,margin属性

Html 块级元素和行级元素

转载:http://blog.csdn.net/yuyanqiao/article/details/8558118 内联元素(inline element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体*

CSS块级元素与行级元素（转载）

块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者.盲人等)的角

行级元素不能设置margin-top

热门专题