行内元素 inline，行内块元素 inline-block，块级元素 block 的区别

  • （可通过 display 属性相互切换） （三个都会自动换行）

padding 会挤压设置的宽高，实际宽高=设置宽高-padding eg. width:300px; padding:10px;则实际的盒子宽度=300-10-10=280px

  • inline：

    • 不会独占一行，
    • 没有宽高，宽高根据内容的变化而变化
    • margin 只可设置左右，无上下。
    • 可设置 padding 的上下左右

  • inline-block:

    • 不会独占一行
    • 有宽高
    • margin，padding 都有上下左右

  • block:

    • 独占一行
    • 有宽高，设置宽后仍独占一行
    • margin，padding 都有上下左右

display 属性区别的更多相关文章

  1. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  2. 深入理解display属性

    display 属性在网页布局中很常见,但是之前一直不了解他的各个属性的区别,只是简单的使用block.none属性,对于其他属性都不清楚,今天详细的学习和实践display属性的各个方面 定义 di ...

  3. Code笔记之：CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

  4. display & visibility区别

    http://www.cnblogs.com/zhangran/archive/2012/08/29/2662459.html 说明:在学习css的过程中由于其中包含太多的元素.属性等等,总有许多是自 ...

  5. 转: 详解css中的display属性

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...

  6. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  7. css常用属性之display属性

    1.dispaly属性之一:块级标签转行内便签display: inline(内容有多大,就展示多大(用F12看区别)) 2.display属性之二:行内便签转块级标签:diaplay: block ...

  8. Display属性学习总结

    HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...

  9. CSS学习笔记：display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  10. 边框 display属性 盒子模型 浮动 溢出 定位 z-index

    目录 边框 隐藏属性 钓鱼网站 display visibility 盒子模型 调整方式 浮动 溢出 圆形头像的制作 定位 z-index属性 边框 /*border-left-width: 5px; ...

随机推荐

  1. LWC-001_Event

    文章来源: Events (lwc.dev) 1. 监控子组件的动作: Child.html <template> <button>Click</button> & ...

  2. .NET CORE-Auto整合至MVC中

    在Program.cs中使用Autofac工厂去替代默认工厂: public static IHostBuilder CreateHostBuilder(string[] args) => Ho ...

  3. Kubernetes--Pod存活性探测(设置HTTP探针)

    基于HTTP的探测(HTTPGetAction)向目标容器发起一个HTTP请求,根据其响应码进行结果判定,响应码形如2xx或者3xx时表示检测通过."sepc.containers.live ...

  4. Java笔记_递归回溯之小老鼠出迷宫问题

    递归回溯之小老鼠出迷宫问题 直接看代码 /** * @ClassName MiGong01 * @Description TODO * @Author Orange * @Date 2021/4/16 ...

  5. Windows10 WSL开启SSH登录

    1.wsl 安装ssh服务(使用的是ubuntu)sudo apt install openssh-server 2.修改配置文件sudo vim /etc/ssh/sshd_config关键的几处修 ...

  6. Create React App 安装时出现的错误解决方法

    安装很简单 创建一个文件夹  xxx 第一步:npx create-react-app my-app 第二部:cd my-app 第三部:npm start 安装时出现的错误  一 解决方案 一: 全 ...

  7. 广告网络归因技术之SKAdNetwork

    IDFA的背景 为了保护用户隐私,早在2012年就不再允许其生态中的玩家获取用户的唯一标识符,但是商家在移动端打广告的时候又希望能监控到每一次广告投放的效果,因此,苹果想出了折中的办法,就是提供另外一 ...

  8. vue初始化data数据

    初始化data this.$data = this.$options.data() 初始化data中form this.$data.form = this.$options.data().form

  9. pj_0001_compare_col_csv

    #!/usr/bin/python# -*- coding: UTF-8 -*- import pathlibimport pandas as pd print("please input ...

  10. unity GetComponent在android端获取对象错误

    PlayerObj pobj = go.GetComponent<PlayerObj>(); if (pobj && pobj.IsMyTeam()) { marchAct ...