行内元素没有内容时设置默认的宽高

 span {
     line-height: 20px;
     background-color: yellowgreen;

     &:empty {
         display: inline-block;
         width: 1px;
         height: 20px;
     }
}
<span contenteditable></span>
  • 保证元素中没有内容时,可以点击获取焦点

原文地址:https://www.cnblogs.com/guojbing/p/12074831.html

时间: 2024-09-30 15:59:09

行内元素没有内容时设置默认的宽高的相关文章

块元素和行内元素之间的转换,overflow与visibility

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>块元素和行内元素之间的转换,overflow与visibility</title> <style> a{ width:100px; height:100px; border:1px solid #000000; background:red; di

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

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

14-块级元素和行内元素

学习的初期,我们就要知道,标准文档流等级森严.标签分为两种等级: 行内元素 块级元素 比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现: 行内元素和块级元素的区别:(非常重要) 行内元素: 与其他行内元素并排: 不能设置宽.高.默认的宽度,就是文字的宽度. 块级元素: 霸占一行,不能与其他任何元素并列: 能接受宽.高.如果不设置宽度,那么宽度将默认变为父亲的100%. 块级元素和行内元素的分类: 在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级.容器级. 从HT

HTML行内元素、块级元素、行内块级元素的特点与区别

元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 元素分类方式 HTML 可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者可以通过设置display属性值实现相互转化.实现如下 #转换为行内元素 display:inline; #转换为块状元素 display:block; #转换为行内块状元素 display:inline-block; 元素特点 行内元素 不会自动换行 设置宽高无效 设置margin上下方向无效,左右方向有效

为什么有些行内元素可以设置宽高

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”).但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样.在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一. 1. 替换和不可替换元素 从元素本身的特点来讲,可以分为替换和不可替换元素. a) 替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容

CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt

水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的. 这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素.今天我们先来了解一下行内元素怎么进行水平居中? 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.(父元素和子元素:如下面的html代码中,div是“我想要在父容器中水平居中显示”这个文本的父元素.反之这个文本是div的子元素 )如下

29.水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> css代码: <style> div.txtCenter{ text

行内元素(inline标签)设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释

最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证内容有点长,结论: 行内元素自身并没有行高这个属性,虽然设置可以设置行高,但是最终作用的地方并不是自身,而是其自身所在的行框盒子上!如果你不知道什么是行框盒子,建议你好好读读张大佬的<css世界>,这里我简单的画一画 如上如所示,我的结论是: 内联盒子没有行高这一属性,给它设置line-heigh