如何理解body的margin属性_html/css_WEB-ITnose-html教學-PHP中文網

回复讨论(解决方案)

首頁

web前端

html教學

如何理解body的margin属性_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

<html><head><style type="text/css">#outerBox{	width:128px;	height:128px;	border:10px black dashed;	background:silver;}</style></head><body>	<div id="outerBox">	</div></body>

登入後複製

上面代码在IE中的效果是
div这个盒子与浏览器边界有一定距离，但是如果html代码改为

<html><head><style type="text/css">#outerBox{	width:128px;	height:128px;	border:10px black dashed;	background:silver;}body{margin:0px;}</style></head><body>	<div id="outerBox">	</div></body>

登入後複製

此时的显示效果就是
div的边框几乎挨着浏览器边界了
想问下margin不是指的是盒子边框外的距离吗？而div不是在body盒子的内部码？为什么设置body的margin会导致div与body的距离缩小了，我理解的应该是设置body的padding为0px才会使div与body的距离变为0啊

回复讨论(解决方案)

大盒子包含着小盒子，body为大盒子，div为小盒子整个文档可视为包含body的更大的盒子

body自身带有margin值，去掉了body外围的外边距，那么 body整体会做调整，就像一个大盒子的位置移动，那么大盒子里面的东西当然会随之移动

margin 是外边距，在边框外。padding 是内边距，在边框内，是内容区与边框之间的距离。
body 本身也是个盒子，可能默认的 margin 不为 0，所以与窗口边缘有一定距离。
body 的 margin 设为 0 之后，就紧挨着窗口边界了。outerBox 是 body 盒子里面的元素。
你给 body 在加一个 boder，看一下效果。

BODY 默认的
margin 为 4px;
padding 为 0px
请注意与其他 html 标记的不同

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。