学习微信小程序之css11内外边距集合

最新推荐文章于 2019-07-27 15:09:30 发布

转载最新推荐文章于 2019-07-27 15:09:30 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hywbk/p/6257008.html

本文通过一个具体的例子展示了如何使用HTML进行页面结构搭建，并利用CSS进行样式布局，包括内外边距的应用技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 600px;
            background-color: #b3d4fc;
        }
        .box strong{
            /*对于行内元素来说,上下的内外边距不支持设置,设置了也不起作用,但是左右会起作用*/
         margin-top: 200px;
            margin-bottom:200px ;
            margin-left: 50px;
            margin-right: 100px;
            padding: 500px 60px;
        }

    </style>
</head>
<body>
<div class="box">
    <span>我种下一颗种子，终于长出了果实，今天是个伟大日子</span>
    <strong>摘下星星送给你，拽下月亮送给你，让太阳每天为你升起</strong>
    <span>变成蜡烛燃烧自己，只为照亮你，把我一切都献给你，只要你欢喜</span>
    <span>你让我每个明天都 变得有意义，生命虽短爱你永远，不离不弃</span>
    <span>你是我的小呀小苹果儿 怎么爱你都不嫌多</span>
    <span>红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火</span>
    <span>你是我的小呀小苹果儿 就像天边最美的云朵</span>
    <span>春天又来到了花开满山坡 种下希望就会收获</span>
</div>
</body>
</html>