定义

行内元素只占据它对应标签的边框所包含的空间,没有换行效果

div{
/* 定义行内元素*/
display:inline
}

特点

  1. 多个元素可以横排显示
  2. 不支持宽高和上下margin
  3. 支持padding,上下padding只对自身有效,不影响其他元素
  4. 行内标签不能包含块级标签(a标签除外)
  5. a标签不能包含a标签

常见行内元素

  a标签、b标签、span标签、img标签、strong标签、sub标签、sup标签

  以及一系列表单标签:button标签、input标签、label标签、select标签、textarea标签

html行内元素的更多相关文章

  1. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  2. 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  3. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

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

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

  5. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  6. CSS HACK tab制表符导致行内元素之间的空隙如何解决

    <!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...

  7. 关于行内元素的margin padding一些说明;background-color的范围

    ①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果 ...

  8. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  9. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  10. img 默认是行内元素,它旁边的空格是会保留的

    img 默认是行内元素,它旁边的空格是会保留的.因此图片宽度设置百分百后下面会有点找不出原因的间隙. 解决办法:img{display:block}

随机推荐

  1. Java程序设计学习笔记(二)

    --正则表达式    正则表达式         ^ 匹配的开始         $ 匹配的结束         [] 表示匹配任意一个字符             [asdasd]          ...

  2. Ansible基础使用

    原文转自:https://www.cnblogs.com/itzgr/p/10233932.html作者:木二 目录 一 Ansible命令用法 1.1 免密钥 1.2 Ad-Hoc基础命令 1.3 ...

  3. leaflet加载离线OSM(OpenStreetMap)

    本文为博主原创,如需转载需要署名出处. leaflet作为广为应用的开源地图操作的API,是非常受欢迎,轻量级的代码让使用者更容易操作. 废话不多说,下面直接给出范例. 首先在这个网站下载leafle ...

  4. Sentry-CLI 使用详解(2021 Sentry v21.8.x)

    内容源于:https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创 ...

  5. 性能测试工具JMeter 基础(一)—— 安装、配置环境变量

    JMeter下载 下载地址:https://jmeter.apache.org/download_jmeter.cgi 下载完成后解压后可直接使用,不用进行安装 环境变量配置 新增变量名:JMETER ...

  6. Defence

      emm...这道题我调了一下午你敢信??   好吧还是我太天真了.   开始的时候以为自己线段树动态开点与合并写错了,就调;   结果发现没问题,那就是信息维护错了.   一开始以为自己最左右的1 ...

  7. 微信小程序开发正常,真机预览模式错误

    原因是开发时设置了不检查域名是否合法,去后台设置上就可以了

  8. BeanFactory和ApplicationContext对比

    一.BeanFactory和ApplicationContext对比 其中,ApplicationContext容器即时加载,就是一加载配置文件,就会创建对象,且自动装配bean(即写道xml中bea ...

  9. 利用nginx 来实现内网yum源(反向代理)

    简介 在项目部署时,尤其是在政府企业,对于外网简直是奢望,但是对于运维来说,没有外网的话只能自建yum源.我今天来说的是一种简单的自建yum源方法,前提是必须有一台内外网都有的机器,我们一般称为前置机 ...

  10. vue中的watch

    1.第一种 watch:{ total:{ // total:要检测的数据   handler:(val,oldVal)=>{ // handler方法自动执行   }, deep:true / ...