【HTML+CSS】外边距-margin

外边距-margin

外边距\外间距

margin特征:

  • 位于边框border之外
  • margin值是添加给自身的, 调整元素自身的位置或者调整元素与元素于元素之间的位置
  • margin不会撑大盒子
  • margin在页面中没有颜色
  • 在谷歌f12中显示橘黄色
  • marign支持负值

margin属性:

单边外边距属性

  • margin-方位词(top\right\bottom\left)

1-4边的外边距

  • 一个值 四边
  • 两个值上下 左右
  • 三个值上 左右 下
  • 四个值上右下 左
<style>
        .box1{
            background-color: pink;
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 10px solid red;
            /* 1-4边的外边距 */
            /* 1-4边 */
            margin: 80px;
            /* 1-上下 2-左右 */
            margin: 80px 10px;
            /* 1-上 2-左右 3-下 */
            margin: 80px 10px 40px;
            /* 1234-上右下左 */
            margin: 80px 90px 70px 30px;
        }
</style>
    <div class="box1"></div>

谷歌浏览器检查
在这里插入图片描述
在这里插入图片描述

外边距溢出

外边距溢出是父元素里面的第一个子元素添加marign-top,会把父元素带下来

原因:父元素盒子元素共用了margin
解决:

  1. 给父元素添加1px的border:1px solid transparent
  2. 给父元素添加1px的padding-top:1px
  3. 给父元素添加overflow: hidden(触发了BFC)

小结: 方法1\2都会撑大盒子, 建议使用方法3

<style>
      .father{
        width: 100px;
        height: 100px;
        background-color: bisque;
        /* padding-top: 1px; */
        /* border: 1px solid transparent; */
        overflow: hidden;
      }  
      .son{
        width: 50px;
        height: 50px;
        background-color: pink;
        margin-top: 30px;
      }
    </style>
    <div class="father">
        <div class="son"></div>
    </div>

在这里插入图片描述

外边距合并

垂直方向: 相邻的上下两个元素, 上面有margin-bottom, 下面有marign-top, 垂直外边距相遇, 间距发生重叠, 以数值大的为准

解决:

  • 间距写单方向即可(单边外边距)
<style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
         p{
            height: 100px;
            width: 100px;
            margin-top: 60px;
            background-color: skyblue;
        }
    </style>
    <div>div</div>
    <p>p</p>

在这里插入图片描述
在这里插入图片描述

水平方向: 外边距相加 左右两个兄弟元素之间, 外边距相遇会相加

<style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-right: 30px;
        }
        p{
            height: 100px;
            width: 100px;
            background-color: skyblue;
            float: left;
            margin-left: 20px;
        }
    </style>
    <div>div</div>
    <p>p</p>

在这里插入图片描述

水平居中

独占一行的元素水平居中

  • 给自身设置, 为了调整元素与元素之间的位置
    • margin: auto
    • margin: 0 auto
<style>
        *{
            padding: 0;
            margin: 0;
        }
       .father{
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
        .son{
            height: 50px;
            width: 50px;
            background-color: pink;
            margin: auto;
        }
    </style>
    <div class="father">
        <div class="son"></div>
    </div>

不独占一行的元素水平居中

  • 给父元素设置
    • text-align: center
<style>
        *{
            padding: 0;
            margin: 0;
        }
       .marginBox{
            height: 100px;
            width: 100px;
            background-color: skyblue;
            text-align: center;
        }
        span{
            background-color: pink;
        }
    </style>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="marginBox">
        <span>12312</span>
        <img src="" alt="">
    </div>

margin语法

  • 数值
  • 负值
  • auto(特殊取值)
  • 百分比 参考父元素的宽度

padding

  • 数值
  • 百分比 参考父元素的宽度

总结+复习

  • 元素类型的转换(一)
    • 块级元素
    • 行内元素\内联元素(其中包括特殊的行内块元素)
  • 元素类型的转换(二)
    • 块级元素
    • 行内元素、内联元素
    • 行内块元素\内联块元素
      • 块元素div ph1-h6 ul ol li dl dt dd form hr
    • 独占一行, 在文档流从上往下排列
    • 设置宽高有效
    • 默认宽高为父元素的100%, 默认宽高靠内容撑开
    • 盒子模型的属性均有效
    • 在网页中以块的形式存在, 作为容器, 用于布局
      • 行内元素spansdel strong a u sub sup b em i br
    • 不独占一行, 与其他行内元素或者行内块元素共用一行从左往右排列, 一行放不下主动换行
    • 设置宽高无效
    • 默认宽高靠内容撑开
    • 盒子模型中padding, border, margin上下属性无效
    • span常用于一行文具有不同样式的时候
    • 紧紧包裹文字, 不会有多余空间: 左右的行内元素之间有间隙
    • 行内块元素img input
    • 不独占一行, 与其他的行内元素或者行内块元素共用一行从左往右排列,一行放不下主动换行
    • 设置宽高有效
    • 默认宽高不同浏览器设置不同, 后期需要我们自己设置
    • 盒子模型的属性均有效
    • 会出现幽灵空白节点
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芒果Cake

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值