一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS Margin</title>

    <style>

    p{

        background-color: yellow;

    }

    p.margin{

margin: 100px 50px;

    }

    </style>

</head>

<body>

   <p>This is a paragraph with no specified margin</p>

   <p class="margin">this is a paragrapth with specified margins.</p>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS Margin(外边距)的更多相关文章

  1. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  2. CSS：CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

  3. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  4. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  5. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  6. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  7. CSS margin 外边距 属性的位置关系

    padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...

  8. CSS Margin外边距合并

    应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { ma ...

  9. css关于内外边距的详细解释

    贴图吧,图一眼明了. 无效果时候有 只有一个<div>啦啦啦</div> 只有padding时候有: padding详细设计时: 解释:padding是对内的,如padding ...

  10. padding(内边距)、margin(外边距)、border(边框)

    元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...

随机推荐

  1. Tensorboard可视化

    # -*- coding: utf-8 -*-"""Created on Sun Nov 5 09:29:36 2017 @author: Admin"&quo ...

  2. SpringBoot 集成 Swageer2

    添加Maven依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox ...

  3. [Swift]LeetCode104. 二叉树的最大深度 | Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  4. [Swift]LeetCode517. 超级洗衣机 | Super Washing Machines

    You have n super washing machines on a line. Initially, each washing machine has some dresses or is ...

  5. [Swift]LeetCode875. 爱吃香蕉的珂珂 | Koko Eating Bananas

    Koko loves to eat bananas.  There are N piles of bananas, the i-th pile has piles[i]bananas.  The gu ...

  6. Oracle视图(和Mysq一样l)

    本章内容: Oracle视图介绍与创建.Oracle视图的查询与修改.Oracle的复杂视图 1. Oracle视图介绍与创建 (1)了解常见的数据库对象都有哪些 (2)了解什么是视图以及为什么要使用 ...

  7. ASP.NET Core 2.0 MVC - 获取当前登录用户信息

    一.前言 上篇实战完成后,没想到会有那么多的圈友给了那么多的支持,甚至连只是作为代码仓储的git上也给了一些小星星,真的感觉很惶恐啊,哈哈哈,毕竟代码写的很烂啊.由于上一篇只是大概说了下项目,所以准备 ...

  8. JVM基础系列第2讲：Java 虚拟机的历史

    说起 Java 虚拟机,许多人就会将其与 HotSpot 虚拟机等同看待.但实际上 Java 虚拟机除了 HotSpot 之外,还有 Sun Classic VM.Exact VM.BEA JRock ...

  9. 【java爬虫】---爬虫+基于接口的网络爬虫

    爬虫+基于接口的网络爬虫 上一篇讲了[java爬虫]---爬虫+jsoup轻松爬博客,该方式有个很大的局限性,就是你通过jsoup爬虫只适合爬静态网页,所以只能爬当前页面的所有新闻.如果需要爬一个网站 ...

  10. c# 中的封装、继承、多态详解

    面向对象有封装.继承.多态这三个特性,面向对象编程按照现实世界的特点来管理复杂的事物,把它们抽象为对象,具有自己的状态和行为,通过对消息的反应来完成任务.这种编程方法提供了非常强大的多样性,大大增加了 ...