CSS 这就是一个按照我看到的css ,边用边总结的笔记~-CSDN博客

本文链接：https://blog.csdn.net/m0_67466364/article/details/137790815

margin 和 padding
display
- 外部表现类(display-outside) : `block` , `inline`
- 内部表现类(display-inside) : `flex`,`gird`,`table`,`flow`,`flow-root`,`ruby`

margin 和 padding

可以设置1~4个属性

属性个数	属性值
1	一起设置上下左右
2	分别设置上下 , 左右
3	分别设置上 , 左右 , 下
4	分别设置上右下左

display

外部表现类(display-outside) : `block` , `inline`

该类属性值的效果是规定元素的外部显示类型 , 也就是在页面布局中的元素类型 : 块级元素或内联元素
- block
该属性值用于设置元素的外显类型为块级元素 , 在页面布局中 , 单独占据一整行的空间 , 在元素前后进行换行 . 该类型的元素还可以设置 width,height,padding,margin等属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .d{
        display: block;
        width: 200px;
        height: 100px;
        background: pink;
      }
    </style>
  </head>
  <body >
    <p class="d">这是一段文本</p>
  </body>
</html>

在这里插入图片描述

- inline
该属性值用于设置元素的外显类型为行内元素 , 在页面布局中 , 可与其他行内元素位于同一行 . (不换行)
该类型元素
设置的width,height , 以及margin的(top,bottom) 都无效
设置的padding(left,rigth),margin(left,right)是有效的
设置的padding(top,bottom) 时 , 在元素空间上是有效的,但这并不会影响与同一行的行内元素的对齐

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .d{
        display: inline;
        width: 200px; /*无效*/
        height: 100px;  /* 无效*/
        margin: 10px 20px;  /* 20px是有效的(因为设置的是左右)  10px无效*/
        padding: 20px 10px; /* 都有效*/
        background: pink;
      }
    </style>
  </head>
  <body >
    <p>这是一段块级元素文本</p>
    <span>这是一段行内元素文本</span>
    <div class="d">这是一个行内元素</div>
    <span>这是第二段行内元素文本</span>
  </body>
</html>