body的margin和边框

最新推荐文章于 2021-06-15 22:50:30 发布
最新推荐文章于 2021-06-15 22:50:30 发布
阅读量764 收藏
点赞数
分类专栏： css 文章标签： IE Safari 浏览器 Opera HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/java_mail_test/article/details/83808262
版权

 

 

浏览器LEFTTOP
IE1015
FF88
Opera88
Safari88

 

 

边框

ie上默认有2px的边框

和头有关，如果有标准头 则为documentELement有边框

如果没有标准头 则为body有边框

 

其他的浏览器默认body和html没有边框

 

 

margin的话 可以通过body {margin:0}解决

 

border的话 可以通过body,html{border:none}解决

CSS-边框和边距详解
主营前端方向，技术栈是vue
11-21 2584
border边框和padding&margin内外边距详解(边框样式、颜色、宽度、简写，上右下左内边距、影响可见框大小，内外边距规则一样，垂直外边距重叠，清除浏览器默认内外边距)
CSS的margin负值运用：压住盒子的相邻框，实现淘宝商品页面的边框操作
qq_44156869的博客
02-21 434
margin负值之美 负边距+定位：水平垂直居中。 一个绝对定位的盒子，利用父级盒子的 50%，然后往左（上）走自己宽度的一半，可以实现盒子水平垂直居中。 压住盒子的相邻框 如淘宝的商品页面： 案例： <style> div { /*浮动的盒子是紧贴在一起的*/ float: left; width: 200px; height: 300px; bor
html中的body有边框,html – 如何在表的tbody / thead部分创建边框？
weixin_33512961的博客
06-10 605
我正在尝试用表格数据创建一个页面,它必须显示为多个表.但是,我有两个相互矛盾的要求：>每个表必须有一个边框.>每个表的列宽必须能够根据内容进行重新调整大小.但是,列宽必须在所有表中保持一致. (即,列的大小基于所有表中该列中的最大单元).为了处理第二个要求,我有一个单一的顶级表,其中包含多个thead和tbody部分.这完美地实现了#2.本质上,我已经在一个较大的父表中创建了多个伪表,...
HTML body顶格，边框0
houyanhua1的专栏
10-25 5806
body{ margin:0;}
html body 边框,html – 如何在表的tbody / thead部分创建边框？
weixin_42133918的博客
06-15 735
我正在尝试用表格数据创建一个页面,它必须显示为多个表.但是,我有两个相互矛盾的要求：>每个表必须有一个边框.>每个表的列宽必须能够根据内容进行重新调整大小.但是,列宽必须在所有表中保持一致. (即,列的大小基于所有表中该列中的最大单元).为了处理第二个要求,我有一个单一的顶级表,其中包含多个thead和tbody部分.这完美地实现了#2.本质上,我已经在一个较大的父表中创建了多个伪表,...
html5除去body边框,【前端】如何彻底取消input color的边框?
weixin_34043280的博客
06-11 1003
我试过设置boder为0,清楚默认样式,可还是会有一个边框,代码如下:Document*{margin: 0;padding: 0;}input{border:0;}我试过宽高可以自己设置,如果要把这个样式变成自定义的背景图片怎么设置呢?回答看了看回答，发现现在论坛里的混子太多了！不知所以然的就给别人乱讲一通，误人子弟！Document*{margin: 0;padding: 0;}input{b...
一个奇怪的发现:html与body,body的margin对html不起作用，html的padding对body却起作用
kbx8916的博客
04-08 2728
eg: html { border:2px solid blue; } body { border:2px solid red; margin:100px; padding:50px; } 这里是文段 1.第一种情况: body有margin,html没padding: 可以看到不管body的margin有多大，body与html
常用元素默认margin和padding值问题探讨
09-22
需要注意的是，从IE 8.0至IE 10.0版本，`<h1>`的margin值和`<body>`的margin值在上下边距上都保持一致，为16像素，但左右边距则为8像素。这可能是由于IE 8及以上版本对于网页的布局和样式表现更加符合现代网页标准的...
jQuery获得包含margin的outerWidth和outerHeight的方法
10-24
这两个方法默认只计算元素的内宽、内高加上边框的宽度和高度，但如果我们想要包括元素的padding和margin，可以通过传递一个参数`true`来实现。 例如，下面的代码展示了如何使用`outerWidth(true)`和`outerHeight...
jsp中使用frameset框架 边框固定不让更改边框的大小
10-25
总的来说，通过使用`<frameset>` 和 `<frame>` 标签，以及 `noresize` 属性，我们可以创建固定边框、不可调整大小的框架布局。同时，理解这些标签在HTML结构中的位置和作用，对于编写符合标准的JSP页面至关重要。
网页 BODY的topMargin 和leftMargin
weixin_34381666的博客
02-07 291
我在一个普通网页中放置一张图片(用img tag)但是不知 什么原因,总是会在左边和上边留下不一些空白,我想干脆把图片做成body的background属性算了,但是后来发现这样的话会使按上一页下一页时出现白屏,所以否决了这个方案. 后来再找了一下body的一些属性,终于找到了 下面两个属性,原来body的默认左边距是10,而上边距是15,所以我就把其设为0就可以了. 转载...
CSS中的body的默认margin
热门推荐
siege
08-17 1万+
CSS中的body的默认margin一般浏览器中都对body标签进行默认的margin设置为8px，当然，不同的浏览器会设置成不同的值，它是由浏览器的user-agent-stylesheet提供的，有些浏览器的user-agent-stylesheet可以由用户进行修改，而有的浏览器则不可以，所以开发人员不能依靠此来修改浏览器的默认设置。如果我们要修改body的默认值，只要覆盖其css样式即可:b
HTML菜鸟入门6
小笨要阳光的博客
08-23 363
去除body样式默认边框<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>无标题文档</title> <style> body{margin:0;}//去除body样式中默认的8px外边框 body{border:1px solid red;}
body标签自带margin值
xiaoxingxingzai的博客
10-17 2925
由于一般浏览器都给body设置了8px的 margin值，因此如果我们不做单独的处理，那么他就会留存一个间隙。 块元素好多都有默认边距，因此我们需要消除他们以方便进行统一设置。 例如： <style> div{ width: 100px; height: 100px; background-color: red; ...
[css] body的默认margin值
weixin_36210698的博客
03-22 5193
body的默认margin值 一般浏览器中都对body标签进行默认的margin设置为8px，当然，不同的浏览器会设置成不同的值，它是由浏览器的user-agent-stylesheet提供了，chrome提供的如下： body { display: block; margin: 8px; } 有些浏览器的user-agent-stylesheet可以由用户进行修改，而有的浏览器...
html中写页边距,html整体页面边距怎么设置
weixin_28007513的博客
05-30 6534
html中，可以通过在body标签元素中使用margin属性添加外边距来设置整体页面边距，具体语法格式“body{margin: 边距值;}”。body标签中包含文档的所有内容，代表整个html页面。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。设置html整体页面边距body{margin: 30px;}HTML页面主体内容效果图：说明：ma...
去掉IE浏览器的body边框
wucc1986
03-08 498
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" 可去除IE浏览器 凹陷的感觉，在嵌入到别的容器里时可用。 按&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR...
padding 和margin区别
最新发布
06-13
### CSS 中 padding 和 margin 的区别及用法 #### 一、基本概念 在 CSS 中，`padding` 和 `margin` 是用于控制元素周围空白区域的两个重要属性。它们的主要作用是调整元素与其他元素或内容之间的距离[^1]。 - **Padding** 是指元素边框与内部内容之间的空白区域。它直接影响到元素内部的空间大小。 - **Margin** 是指元素边框与外部其他元素之间的空白区域。它决定了元素与其他元素之间的距离。 #### 二、主要区别 1. **位置差异** - `padding` 位于元素的边框内侧，用于分隔元素的内容和边框[^2]。 - `margin` 位于元素的边框外侧，用于分隔当前元素与其他元素或父容器的距离[^3]。 2. **透明性与颜色** - `padding` 是透明的，但它会影响元素的宽度和高度计算[^4]。 - `margin` 同样是透明的，但不会影响元素自身的尺寸，仅改变其与其他元素的相对位置[^5]。 3. **塌陷现象** - `margin` 在某些情况下会发生外边距合并（collapse），即相邻元素的垂直外边距会合并为一个更大的值。 - `padding` 不会发生类似的合并现象，因此在需要精确控制间距时更稳定[^4]。 4. **负值支持** - `margin` 支持负值，允许元素重叠或向内收缩[^4]。 - `padding` 不支持负值，始终为正值或零[^5]。 #### 三、代码示例 以下是一个简单的代码示例，展示如何使用 `padding` 和 `margin`： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Padding vs Margin</title> <style> .box { width: 100px; height: 100px; background-color: lightblue; border: 1px solid black; } .with-padding { padding: 20px; /* 内部空白 */ } .with-margin { margin: 20px; /* 外部空白 */ } </style> </head> <body> <div class="box with-padding">Padding 示例</div> <div class="box with-margin">Margin 示例</div> </body> </html> ``` #### 四、实际应用 1. **Padding 的应用场景** 当需要增加元素内部内容与边框之间的空间时，使用 `padding`。例如，在按钮设计中，可以通过设置 `padding` 来调整文字与按钮边框之间的距离[^1]。 2. **Margin 的应用场景** 当需要调整元素与其他元素或父容器之间的距离时，使用 `margin`。例如，在布局中通过设置 `margin` 来避免元素过于靠近页面边缘或其他兄弟元素[^2]。 #### 五、注意事项 - 如果需要同时设置多个方向的 `padding` 或 `margin`，可以分别指定上、右、下、左四个方向的值，或者使用简写形式[^5]。 - 在处理垂直外边距合并问题时，可以通过添加一个透明的分隔元素来避免塌陷。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值