行内元素变成会计元素block和inline-block的区别

左边一个ul的导航,习惯了用li里面放a,想要a有个百分百宽和高,这个整个li就都可以有点击事件了,用了inline-block,宽高可以实现,但是发现一个问题,a的左边始终会有个类似于外边距的样式,设置了magin和padding和0,都没有解决,这个时候想起了,可能是inline-block带来的影响,果断换成block,果然解决,所以以后用inline-block一定要注意,因为可能会带来左边会有一段奇怪的外边距,不好解决,尽量使用block来解决行内元素变成块级元素。

时间: 2024-10-09 10:42:06

行内元素变成会计元素block和inline-block的区别的相关文章

img、input到底是行内还是块级元素?

一.img.input属于行内替换元素.height/width/padding/margin均可用.效果等于块元素.      行内非替换元素,例如, height/width/padding top.bottom/margin top.bottom均无效果.只能用padding left.right和margin left.right改变宽度. 二.在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一. 从元素本身的特点来讲,可以分为不可替换元素和替

block,inline,inline-block的区别

block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都是比较通俗的说法,block应该是“block-level elments”(块级元素),inline应该是“inline elements”(行内元素) block元素在网页中会单独占一行,即使他的宽度比浏览器窗口小很多也不会让后面的元素挤上来跟他同占一行(比较小气),而inline就不一样啦,他

block,inline和inlinke-block区别

1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行: inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,

行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的display属性(行内元素和块级元素) 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 我们最关心的还是display:inl

探讨行内元素转换为块级元素

行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行.2. 行内元素:没有物理属性.但是margin,padding值有用.不占据一行,后边可以有兄弟元素.3. 即是块又是行内,根据兄弟元素决定. 一般来说,将行内元素和块级元素进行转换的话是给其加上display这个属性.行内→块级,display:block;块级→行内,display:inline; 这也是大

行内元素与块级元素的区别

块级元素: 同一标签内写两个以上,标签会换行显示,如设置宽,则与父级之间的宽度差由margin填充: 宽度默认100%,高度随内容儿变化,宽高都可主动设置: 行内元素: 同一标签内写两个以上,标签会在同一行显示,并且之间会有空隙(该空隙是解析标签间空格所导致): 宽,高默认为0:随内容变化,不可主动设置宽高.padding与margin的上下边距: 常用的img可直接设置宽,高,margin,padding(因img表现的像inline-block): 如想设置宽,高,margin,paddin

详解css中的display属性(行内元素和块级元素)

display属性 首先,所有主流浏览器都支持 display 属性.其次,我们都知道display 属性规定元素应该生成的框的类型.默认值:inline 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 那么,display:inline.display:block和display:inline-block有什么区别呢? <s

行内元素的上下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

img/input等部分标签是行内标签,为什么也可以设置宽和高

常见标签分类在平常的学习中,我们应该都知道 html 标签可以分为块级标签和行内标签常见的块级标签有:ul.ol.li.form.h1-h6.hr.p.table.div 等常见的行内标签有:a.button.br.img.input.label.select.span 等但细心的同学就会发现,尽管 img 是行内标签,但是我们仍然可以给其设置宽和高,这里就涉及到另一个概念 另一种分类:可替换标签和不可替换标签可替换标签:标签的具体显示内容要根据其属性来决定的标签就是可替换标签,如 img.in