一，效果图。

二，代码。

<!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. C# 开源组件--NPOI读取Excel单元格中的公式值

    今天在项目中碰到了EXCEL导入的数据是用公式生成,直接导入不了数据,写在博客中方便自已查询也可以给想找这方面的参考一下: 用NPOI导入时,在OFFICE 2007中的文件导入时一般会用XSSF,所 ...

  2. React Native 断点调试 跨域资源加载出错问题的原因分析

    写在前面 ————如果从头开始看还没解决,试试文章最后的绝招 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解 ...

  3. Hello，Thread

    创建线程的三种方法,线程的生命周期,sleep,yield,join,wait 和notify,线程组,守护线程,线程的优先级 ◆ 如何创建线程 ◆ Java 中创建线程的方法有三种: 继承 Thre ...

  4. 再谈反向传播（Back Propagation）

    此前写过一篇<BP算法基本原理推导----<机器学习>笔记>,但是感觉满纸公式,而且没有讲到BP算法的精妙之处,所以找了一些资料,加上自己的理解,再来谈一下BP.如有什么疏漏或 ...

  5. [Swift]LeetCode809. 情感丰富的文字 | Expressive Words

    Sometimes people repeat letters to represent extra feeling, such as "hello" -> "he ...

  6. Kubernetes系列之监控Metres-server实战篇

    本次系列使用的所需部署包版本都使用的目前最新的或最新稳定版,安装包地址请到公众号内回复[K8s实战]获取 介绍 从 Kubernetes 1.8 开始,Kubernetes 通过 Metrics AP ...

  7. nvidia-docker+cuda8.0+ubuntu16.04

    nvidia-docker安装 如果之前安装过docker1.0版本,需要先删掉该版本和之前创建的容器 docker volume ls -q -f driver=nvidia-docker | xa ...

  8. linux-php5.6-安装sftp扩展

    一. 更新gc库,添加libssh2库 yum -y install libstdc libgomp cpp gcc libgfortran libssh2 libssh2-devel gcc-gfo ...

  9. Elasticsearch Search API

    当执行一个搜索时,它将这个搜索请求广播给所有的索引分片.可以通过提供路由参数来控制要搜索哪些分片.例如,当检索tweets这个索引时,路由参数可以设置为用户名: curl -X POST " ...

  10. 通过LRU实现通用高效的超时连接探测

    编写网络通讯都要面对一个问题,就是要把很久不存活的死连接清除,如果不这样做那死连接最终会占用大量内存影响服务运作!在实现过程中一般都会使用ping,pong原理,通过ping,pong来更新连接的时效 ...