css之内边距和外边距属性

一,内边距属性


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47-内边距属性.htmltitle>
    <style>
        div{
            width: 98px;
            height: 90px;
            border:solid;
        }
        .box1{
            padding-top: 20px;
        }
        .box2{
            padding-left: 20px;
        }
        .box3{
            padding-right: 100px;
        }
        .box4{
            padding-bottom: 50px;
        }
        .box5{
            padding: 20px 50px 100px 200px;
        }
    style>
head>
<body>


<div class="box1">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字div>
<hr>
<div class="box2">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字div>
<hr>
<div class="box3">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字div>
<hr>
<div class="box4">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字div>
<hr>
<div class="box5">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字div>
body>
html>

二,外边距属性


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-外边距属性.htmltitle>
    <style>
        span{
            /* span 是行内元素 不能设置宽高 要设置需要转换 */
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 50px;
            border: 1px solid #000;
        }
        .box1{
            /*margin-top: 20px;
            margin-right: 40px;
            margin-bottom: 80px;
            margin-left: 160px;*/
            margin: 20px 40px 80px 160px;
        }
    style>
head>
<body>

<span class="box1">我是spanspan><span class="box2">我是spanspan><span class="box3">我是spanspan>
<div class="box">div>
body>
html>

三,外边距合并的特殊之处

外边距设置,在水平方向上的两个标签上都相向设置,那么就会将两个外边距的距离叠加在一起;
在在垂直方向上的两个标签上都相向设置,那么就会有一个比较大的外边距代替两个外边距,不会叠加,只会显示一个比较大外边距。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>49-外边距的合并现象.htmltitle>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        /* 设置右边距 */
        .hezi1{
            margin-right: 50px;
        }
        .hezi2{
            margin-left: 100px;
        }
        .box1{
            margin-bottom: 50px;
        }
        .box2{
            margin-top: 150px;
        }
    style>
head>
<body>

<span class="hezi1">我是spanspan><span class="hezi2">我是spanspan>
<div class="box1">我是divdiv>
<div class="box2">我是divdiv>
body>
html>

你可能感兴趣的:(前端基础语言从学习)