margin外边距问题
1 、上下边距会叠加
!DOCTYPE html>
<html>
<head>
<m<etacharset="UTF-8">
<title></title>
<style>
.box1{
width:500px;
height:300px;
background: blue;
margin-bottom:30px;
}
.box2{
width:300px;
height:100px;
background:#ffff00;
margin-top:30px;
}
</style>
</head>
<body>
<divclass="box1"></div>
<divclass="box2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
.box1{
width:500px;
height:300px;
background: blue;
}
.box2{
width:300px;
height:100px;
background:#ffff00;
margin-top:30px;
}
</style>
</head>
<body>
<divclass="box1">
<divclass="box2"></div>
</div>
</body>
</html>
margin外边距问题的更多相关文章
- 为什么margin-top不是作用于父元素【margin外边距合并问题】
coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...
- CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
- CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...
- CSS：CSS margin(外边距)
ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...
- 关于margin外边距合并的问题
一 .兄弟元素margin外边距合并演示 当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...
- padding(内边距)、margin(外边距)、border(边框)
元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...
- margin外边距属性
外边距属性: 设置元素与元素之间的距离(外边距),4个方向(上右下左). margin:长度值|百分比|auto margin-top margin-right margin-bottom margi ...
- CSS margin 外边距 属性的位置关系
padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...
- Margin外边距叠加
外边距(Margin)叠加 只有普通文档流中块级元素(块框)的垂直外边距才会发生外边距叠加.行内框.浮动框和绝对定位框之间的外边距不会叠加 两个相邻兄弟块框 父元素与子元素,并 父元素没有内边距或边框 ...
- android 国际化 横屏（land） 竖屏（port）margin外边距和padding内边距
android 国际化 横屏(land) 竖屏(port) 边距又分为内边距和外边距,即margin和padding.
随机推荐
- go chapter 6 - map array
遍历 for i,v := range *arr { // 遍历数组,第一个参数为index, 第二个参数为元素 fmt.Println("---------------") fm ...
- Linux命令之chgrp
chgrp [选项] … GROUP FILE … chgrp [选项] … --reference=RFILE FILE … chgrp命令是用来改变文件的组所有权.将改变每一个FILE的所属组为G ...
- oracle Lower Upper length substr
字符函数: Lower(char):将字符串装换为小写的格式 Upper(char):将字符串装换为大写的格式 length(char):返回字符串的长度 substr(char,m,n):从m开始截 ...
- [BZOJ4861][BJOI2017]魔法咒语(AC自动机+矩阵优化DP)
4861: [Beijing2017]魔法咒语 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 217 Solved: 105[Submit][Sta ...
- 【DFS】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem D. Divisibility Game
题意:给你一个序列,长度不超过52,每个元素不超过13.让你重新对这个序列排序,sum(i)表示i的前缀和,使得排序过后,对每个i,都有sum(i)%i==0. 深搜,加两个优化:①倒着从后向前搜:② ...
- Spring beans.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Problem C: 更改大小写
#include<stdio.h> int main() { ; ]; gets(a); while(a[i]!='\0') { ; ++i; } printf("%s" ...
- Codeforces Beta Round #3 A. Shortest path of the king 水题
A. Shortest path of the king 题目连接: http://www.codeforces.com/contest/3/problem/A Description The kin ...
- selector简介
最近在学习java NIO,发现java nio selector 相对 channel ,buffer 这两个概念是比较难理解的 ,把学习理解的东西以文字的东西记录下来,就像从内存落地到硬盘,把内存 ...
- 利用require.js实现javascript模块化加载
这种引入很看到很想死吧! <script src="1.js"></script> <script src="2.js">& ...