inline、inline-block、block 的 margin 和 padding 表现

missonce 发布于2019-08-30 15:53 / 3473人阅读

摘要：的和表现概述属性表现在垂直方向上不生效设置本身生效，但是没有把父级元素撑开盒宽度默认为内容宽度，设置和都生效盒宽度默认为父元素宽度，设置和都生效测试结果图测试代码

inline、inline-block、block 的 margin 和 padding 表现 概述

display 属性	表现
inline	margin 在垂直方向上不生效；设置 padding 本身生效，但是没有把父级元素撑开；
inline-block	盒宽度默认为内容宽度，设置 margin 和 padding 都生效
block	盒宽度默认为父元素 100% 宽度，设置 margin 和 padding 都生效

测试结果图

测试代码

css

body {
  margin: 0;
}
section {
  width: 800px;
  margin: 20px auto 0;
  border: 1px solid #660099;
}
header {
  line-height: 40px;
  font-size: 22px;
  text-align: center;
}
.box {
  border: 1px solid yellow;
}
.com {
  margin: 10px;
  padding: 10px;
  border: 1px solid #000;
}
.inline {
  display: inline;
  background: #FF3366;
}
.inline-block {
  display: inline-block;
  background: #FF9966;
}
.block {
  display: block;
  background: #99CC66;
}
.box {
  background: #006699;
}

html


  inline
  
    inline
  
  
    inline
  


  inline-block
  
    inline-block
  
  
    inline-block
  


  block
  
    block
  
  
    block

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116668.html

CSS2中盒模型与布局的一些概念关系

摘要：的一些名词和概念用来帮你更明确地去描述世界的事物。具体信息可以参考盒模型的解释，这里暂且不作展开。的位置和大小时根据一个称为的边界进行计算的。其它情况，依据设定的值进行处理指定值最终表现值与指定值相同 CSS的一些名词和概念用来帮你更明确地去描述HTML/CSS世界的事物。 box 在CSS中，一个元素就可以看作一个box。具体信息可以参考盒模型的解释，这里暂且不作展开。 conta...

happyhuangjinjin 2019-08-30 15:55 评论0 收藏0
深入理解css盒子模型

摘要：下面我们就一步一步揭开的神秘面纱，深入理解盒模型，这对我们在布局上会有一个质的提升。与内联元素的百分比值与内联元素。 css是一门具象语言，并不像js那样具有逻辑性，因此，就算入行了前端很久的工程师，也觉得css难以掌握。下面我们就一步一步揭开css的神秘面纱，深入理解css盒模型，这对我们在布局上会有一个质的提升。盒子模型 showImg(https://segmentfault....

gplane 2019-08-29 15:14 评论0 收藏0
为什么有些内联（行内）元素可以设置宽高？

摘要：宋体块级元素主要有宋体宋体内联元素不会以新行开始，和相邻的内联元素在同一行。也就是说，绝对定位或者浮动的内联元素，实际表现为块级元素，可以设置宽高和边距。为什么有些内联（行内）元素如img、input可以设置宽高？在说明之前我们先来了解一些定义。块级元素和内联元素： ①块级元素总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。宽度(width)、高度(height)、...

netScorpion 2019-04-23 13:31 评论0 收藏0
FE.CSS-快速梳理

摘要：元素根据外在盒子是内联还是块级，分成块级元素和内联元素。值为常见的内联元素有。注数值需向上舍入是相对于计算的只能应用于内联元素以及的元素。的显示内联元素元素的垂直中心点和行框盒子基线往上处对齐。前言本文是对《CSS世界》阅读中所做笔记和感悟，若有错误请指正。概述 CSS设计初衷是为了更好地展示图文。HTML元素根据外在盒子是内联还是块级，分成块级元素和内联元素。HTML元素也可根...

XUI 2019-08-23 15:40 评论0 收藏0
css基础知识整理篇

摘要：折叠后的计算参与折叠的都是正值在都是正数的情况下，取其中较大的值为最终值。参与折叠的中有正值，有负值有正有负，先取出负中绝对值中最大的，然后，和正值中最大的相加。单冒号用于伪类，双冒号用于伪元素。转自某个大神整理的面试题盒子模型标准盒子模型内容（content）+ 填充（padding）+ 边界（margin）+ 边框（border）; 低版本IE盒子模型 content部分把...

QiShare 2019-08-29 11:24 评论0 收藏0