关于css布局中margin,padding在整个布局中使用的一些细节

最近在学习写网页,在用html标记语言和css布局时,发现css布局中的margin,padding会使整个布局变大,最后在研究了css盒模型时找到了答案。

主要原因是margin定义了模块的外边距,padding定义了模块的内边距,如果在布局时没有把两块边距像素考虑到整个布局中,并且在父布局里宽高都设置为固定,此时会发生的事情就是:在整个父布局中如果宽度容纳不下子布局,那么子布局会撑出整个父布局,例如:

<div id="container">
		<div id="header"></div>
		<div id="main">
			<div id="left"></div>
			<div id="rigt"></div>
		</div>
		<div id="footer"></div>
	</div>

布局如上,container为父布局,其余全部为子布局,当我的子布局header设置的宽度超过container设置的宽度时,代码如下:

    #container{
		width: 820px;
		height: auto;
		background: white;
		margin:0 auto;
		background: yellow;
	}
	#header{
		width: 840px;
		height: 50px;
		background: green;
		margin: 10px 0px 0px 10px;
	}

会发生如下情形:

可以看到绿色的部分已经超出了***部分,如果并排的两个子布局总宽度超过了父布局的宽度,则会发生右边的布局会自动排到左边布局的下面,代码如下:

        #left{
		width: 200px;
		height: 200px;
		background: red;
		float: left;
		margin: 10px 10px;
	}
	#rigt{
		width: 600px;
		height: 200px;
		background:blue;
		float: left;
		margin: 10px 10px;
	}

这里左布局宽度200px,右布局宽度600px,加上margin的边距一共是830px,超过了父布局的820px,所以出现的情形是这样的:

可以看到右布局排在了左布局的下面。本次博文就写到这里,希望大家可以支持。

时间: 2024-10-24 22:16:07

关于css布局中margin,padding在整个布局中使用的一些细节的相关文章

css 巧用 margin/padding 的百分比值实现高度自适应(多用于占位,避免闪烁)

一个基础却又容易混淆的 css 知识点 本文依赖于一个基础却又容易混淆的 css 知识点:当 margin/padding 取形式为百分比的值时,无论是 left/right,还是top/bottom,都是以父元素的width为参照物的! 高度自适应占位 假设有这么个场景: 如上图所示,有这么一种用来放图片的容器,图片都是正方形(为了方便举例用正方形,实际上只要固定长宽比例即可).在 PC 端好办,容器的宽高都写死是多少 px,这样即使图片加载不出来容器都不会变型.但是在移动端,由于各机型分辨率

css元素的margin,padding

一.元素的分类 1.内联元素:不独占一行,不能设置宽高,对其设置的margin,padding,不会影响垂直位置. 如<a>.<span>.<br>.<i>.<em>.<strong>.<label>.<q>.<var>.<cite>.<code>... a:对内联元素设置padding属性top,left,bottom,right都会生效; 但是给内联元素设置padding

css系列教程--margin padding column(完结)

margin/margin-left/margin-right/margin-top/margin-bottom设置边距属性margin:0;--所有外边距0margin:0 1px;--margin-top/bottom为0.margin-left/right为1pxmargin:1px 2px 3px 4px;--margin-top/right/bottom/left padding与margin类似,使用啦声明内边距的.用法同上 column-count:number:用来定义显示的列数

css之使用 | margin | padding

a元素下的图片: 链接: 段落: 这样写的一个好处是,以后如果要XX公司和下面的段落行距变为0,只要将XX公司所在的标签的padding设为0就可以了. head: homelink: 超链接的样式: li的样式: 作用于最后一个li:去掉竖线 日期:

使用CSS中margin和padding的基础和注意事项

在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备以后使用. 一.首先了解CSS盒模型 Box Model 通过这个CSS盒模型模型就很容易理解Margin.padding和Border.. W3C定义的盒模式如下: width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面.背景会

CSS中margin和padding的区别

本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距. 在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法 一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)pad

DIV+CSS布局重新学习之float/margin/padding

之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: CSS 外边距合并实例 1 亲自试一试

HTML中margin和padding的区别

我们以DIV为一个盒子例子,既然和显示生活中的盒子一样,那我们想一下,生活中的盒子 内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫"content(内 容)",而盒子的纸壁给他起个名字叫"border(边框)",如果盒子内部的东西比如是一块硬 盘,但是硬盘怕震动,所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料,这时 硬盘和盒子的边框就有了一定的距离了,我们称这部分距离叫"padding(内边距)",如果 我们需要购买