简单的CSS4.0

Hellow大家好！不知道border元素大家练得怎么样了呢，今天我们要学习的元素啊和border可以说是同宗同脉了，话不多说让我们开始吧！

我们先来看一段代码

div{

width: 400px;

height: 200px;

border: 2px solid;

}

<div class="one"></div>

<div class="two"></div>

<div class="three"></div>

<div class="four"></div>

 

我们可以看到啊网页上出现了四个长方形，今天要学的第一个元素啊叫margin，它是用来控制不同元素之前上下左右的距离，接下来我们给第一个方块简单设置一个margin元素，让我们看一下效果如何

div{

        width: 200px;

        height: 100px;

        border: 2px solid;

    }

    .one{

        margin-top: 100px;

    }

 <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

我们可以明显看到四个方块向下靠了， 这就是我们这个代码margin-top的功劳啦，它能控制该元素与上方元素的距离，那同理啊我们也可以用left、right、bottom来控制上下左右方向与其他元素的距离，让我们来实际操作一下吧！

  div{

        width: 200px;

        height: 100px;

        border: 2px solid;

    }

    .one{

        margin-top: 100px;

    }

    .two{

        margin-left: 100px;

    }

    .three{

        margin-bottom: 100px;

    }

 <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

现在我们可以看到啊，给第二个方块添加margin-left之后，离右边隔开了一段距离，给第三个方块设置margin-bottom之后，离第四个方块有了一段距离，这就是margin基本的运用啦快去实践一下吧

今天要学的第二个元素叫padding，border是控制边框的，margin是控制外面距离的，那padding肯定是控制该元素内部距离的啦

我们先来看代码

div{

        width: 400px;

        height: 200px;

        border: 2px solid;

        background-color: #008c8c;

    }

  <div>遇见你，是我人生中最美的点缀，因你的陪伴，我不再孤单，愿与你漫观云卷云舒，静看花开花落。

        遇见你，是我生命中最美的际遇，因你的爱，我不再忧伤，愿与你共赴天涯，缠绵缱绻。

        遇见你，愿我年华里最美的眷恋，因你的关切，我不再彷徨，愿与你琴瑟和鸣，共谱一曲爱的梵音。</div>

这是一个简单的div元素，里面有一段话啊，背景颜色还是博主最喜欢的马尔斯绿，那么padding的作用是什么呢让我们来看下，由于文字太长啊后面我就不写了

 div{

        width: 400px;

        height: 200px;

        border: 2px solid;

        background-color: #008c8c;

        padding-top: 50px;

    }

<div></div>

我们可以看到方块里的字体向下靠拢了，这就是padding-top在发挥作用啦，同理给padding加上left、right、 bottom也是能生效的，让我们来看一下

左右两边因为我们设置的padding元素与两边拉开了距离，这就是padding最基础的运用啦，大家学废了没

勤能补拙啊大家一定要勤加练习

本次的更新就到这里啦，点个关注再走哦！