开发者社区> 前端歌谣> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

html+css实战110-外边距问题

简介: html+css实战110-外边距问题
+关注继续查看

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .one {
            /* margin-bottom: 50px; */
            margin-bottom: 60px;
        }

        .two {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 50px; */
            /* 如果设计稿没有border, 不能使用这个解决办法 */
            /* border: 1px solid #000; */

            /* overflow: hidden; */
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            margin-top: 50px;

            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
分享45款高质量的免费(X)HTML/CSS模板
当你需要在短时间内设计出一个网站的时候,网站模板就非常有用了。这也就是为什么这些设计模板已成为设计领域的最新趋势的原因。在这篇文章中,收集了各式各样的网站模板,您可以免费下载使用,希望这些设计模板不仅带给您灵感,也让您回到创作轨迹。
754 0
分享45款高质量的免费(X)HTML/CSS模板
您可能还喜欢   60款高质量的网站模板免费下载 30个漂亮的免费 Flash 网站模板下载 最新30佳精美 PSD 网站模板免费下载 寻找网页设计灵感的27个最佳网站推荐 分享50个精美的免费 PSD 网站模板     当你需要在短时间内设计出一个网站的时候,网站模板就非常有用了。
792 0
Html 之CSS样式选择器
Html 之CSS样式选择器
20 0
Html 之使用CSS样式的方式
Html 之使用CSS样式的方式
11 0
HTML+CSS+JS实现仿QQ个人资料卡(思路+源码)
HTML+CSS+JS实现仿QQ个人资料卡(思路+源码)
24 0
HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)
HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)
108 0
html+css实战189-侧导航布局
html+css实战189-侧导航布局
27 0
html+css实战188-侧导航布局
html+css实战188-侧导航布局
30 0
html+css实战185-版权内容
html+css实战185-版权内容
22 0
html+css实战158-定位-显示层级
html+css实战158-定位-显示层级
26 0
+关注
前端歌谣
csdn账号前端大歌谣/前端小歌谣 微信公众号关注前端小歌谣
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
《零基础HTML入门教程》
立即下载
Java开发手册-孤尽秘传版
立即下载