html 关于元素外边距需要知道的

最新推荐文章于 2023-12-19 15:56:44 发布
最新推荐文章于 2023-12-19 15:56:44 发布
阅读量434 收藏
点赞数
分类专栏： 前端html 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loveatspring/article/details/107980191
版权

并排放置两个内联元素时

在这里插入图片描述
如果左边的元素外边距为10像素，右边的元素外边距为20像素，那么这两个元素之间就会有30像素的空间。

上下放置两个块元素时

在这里插入图片描述
浏览器上下放置两个块元素时，它会把它们共同的外边距折叠在一起，且它们共同的外边距为两个外边距中较大的那个外边距大小。假设上面元素下边距为10像素，下面的元素上边距为20像素，则它们的之间距离空间是20像素。

LeoInAutumn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML知识点
圆的博客
09-07 1023
Hyper Text MarkupLanguage（超文本标记语言）。 超文本包括：文字、图片、音频、视频、动漫等 W3C标准 *World Wide Web Consortium（万维网联盟） *成立于1994年，Web技术领域最权威和具影响力的 国 际中立性技术标准机构 *W3C标准包括: 结构化标准语言（XHTML 、XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript ） HTML基本结构 <html > <head> <title&g
ul与div的边距
yGIS
10-17 1750
今天在写一个的这样排版，在一个div里面有ul，其中ul中的li是横排排放的。那么我遇到的问题是ul里面的li与div有一定的边距，如下图所示，其中蓝色方框是一个li，而白色区域是一个div，图中圈出的红色方框表示li与div的距离，可见这个边距还是非常的大。 经过查阅相关资料，得知需要设置ul的边距padding，我这里设置ul的边距padding-left:10px后，得到如下图的结果。...
HTML中详述外边距样式属性（margin）与内边距样式属性（padding）
m0_46383618的博客
07-15 6734
外边距样式属性（margin） 外边距样式属性（margin）：设置边框外的距离。 属性：margin-top样式属性，margin-bottom样式属性，margin-left样式属性和margin-right样式属性。 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{
CSS样式基础内容3
qq_47896523的博客
01-27 389
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top，则它们之间的垂直间距不是二者之和，而是取两个值中较大者
html两个块元素的垂直间距,相邻块元素垂直合并是怎样实现的？
weixin_34792641的博客
06-22 1060
当上下相邻的两个块元素相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。示例代码如下：.one{width:150px;height:150px;background:#FC0;margin...
使用HTML开发商业网站-块元素垂直外边距的合并课件.pptx
07-10
在使用HTML进行商业网站开发的过程中，理解并掌握块元素垂直外边距的合并是一项至关重要的技能。这关乎到网页布局的美观性和合理性，能够帮助设计师更有效地利用CSS控制页面元素的间距。接下来，我们将深入探讨这个...
css 空白外边距互相叠加的解决方法
09-25
HTML结构是一个`<div>`元素包含一个`<p>`元素，它们都有各自的外边距。`div`元素设置了10px的外边距，而`p`元素设置了15px的外边距。根据CSS的外边距合并规则，由于`div`没有垂直边框和填充，它的高度会计算为`p`...
html 内联元素和html 块级元素概述及区别
12-13
内联元素的宽度和高度通常由其内容决定，无法通过CSS直接设置宽度和高度，内联元素的内边距的top/bottom和外边距的top/bottom也不能直接改变。常见的内联元素有：`<a>`、`<abbr>`、`<acronym>`、`<b>`、`<bdo>`、`...
html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
09-25
通过设置元素的左右外边距为自动，元素会自动居中于父容器。例如： ```css .left-right-middle1 { width: 200px; background-color: #69F; margin: 0 auto; } ``` 2. 方法2：利用CSS的`left: 50%`和负`margin-...
html 内外边距区别以及解释
最新发布
tdx03的博客
12-19 4014
我们在之前的学习中学习了边框，我们发现只要是页面的标签元素，都可以实现边框的效果，那么接下来我们来讲解一个比较重要的知识点，边距，边距分为内边距和外边距，它们和边框一起是我们后面学习盒子模型的重要基础。
html如何设置文字的外边距,css设置外边距的属性名是什么
weixin_35436993的博客
06-07 4377
属性名：1、margin，设置元素的所有外边距；2、margin-bottom，设置元素的下边距；3、margin-left，设置元素的左边距；4、margin-right，设置元素的右边距；5、margin-top，设置元素的上边距。本教程操作环境：windows7系统、CSS3版、Dell G3电脑。css 外边距属性margin：在一个声明中设置所有外边距属性margin-bottom：设置...
CSS样式：外边距重叠及父子外边距重叠问题
u014268482的博客
08-03 8051
上下外边距重叠 如图: 给红色和绿色两个BOX分别设置上外边距和下外边距 .box1{ margin-bottom:100px; } .box2{ margin-top:50px; } 结果如图: 此时发现：两个box之间的实际距离是100px。 原因:浏览器在渲染相邻两个box时，如果垂直方向且相邻的box直接各设置了上和外边距，则浏览器只会取最大的那个外边...
html外边距有哪些,css外边距是什么？css外边距属性的介绍
weixin_30958737的博客
06-04 865
在学习css的时候，会css外边距这一概念，所以，css外边距是什么呢？边框以外就是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素，接下来本篇文章将来给大家介绍关于css外边距属性的相关内容。首先我们应该知道css的外边距属性是margin。margin清除周围的(外边框)元素区域。margin 没有背景颜色，是完全透明的。margin可以单独改变元素的上，下，左，右边距，也可以一次改变所...
处理CSS中嵌套块元素垂直外边距的合并（塌陷现象）
qq_42837306的博客
01-18 548
@处理CSS中嵌套块元素垂直外边距的合并（塌陷现象） ##3现象 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。 ###处理 1.可以为父元素定义上边框。 2.可以为父元素定义上内边距。 3.可以为父元素添加overflow:hidden。 ...
12.HTML边距(外边距)、填充(内边距)、边框的概念
Yang_Ke_Di的博客
07-19 6517
边距(外边距) margin分为上下左右四个方向。 设置元素边距时，可以单独设置某个方向。也可以使用复合属性。 属性 含义 margin-top 设置上边距 margin-right 设置右边距 margin-bottom 设置下边距 margin-left 设置左边距 margin 复合属性，顺序为上右下左 填充(内边距) 元素的填充也成为内边距，它是指元素内容与边...
html文本框外边距代码,HTML连载38-内边距属性、外边距属性
weixin_34368368的博客
06-03 3570
HTML连载38-内边距属性、外边距属性一、内边距属性1.定义：边框和内容之间的距离就是内边距2.分开写padding-top:数字px；padding-left:数字px；padding-bottom:数字px；padding-right:数字px；3.连写：padding：上 右 下 左；4.注意点：(1)给标签设置内边距之后，标签占有的宽度和高度会发生变化(2)内边距也会有背景颜色div{f...
【html】盒模型div，边框border，内边距padding，外边距margin
m0_50947589的博客
04-13 8748
#初识盒模型@TOC 要想学习盒模型，首先要知道什么是盒模型。顾名思义，每个div标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子嵌套排列而成。 ##盒模型的组成@TOC 盒模型包括：content（内容）、border（边框）、padding（内边距）以及margin（外边距）。 content（内容）：显现图像和文本内容。 border（边框）：指围绕在盒模型外侧的一条样式自定义的线。 padding（内边距）：指元素内容与边框之间的间距。 margin（外边距）：指围绕在边框之外的
html改变元素外边距,CSS 简明教程 - 外边距 ( margin ) 属性
weixin_34755543的博客
06-04 2714
CSS margin 属性用于在 HTML 元素周围创建 「 空白 」，这些空白在元素的边框之外创建我们可以单独设置元素的上边距，下边距，左边距和右边距，也可以使用 margin 属性同时设置所有边距下图显示了填充 ( margin ) 和外边距 ( margin) 之间的关系，红线是元素的边框margin 属性接受任何长度单位，可以是像素 px，英寸，毫米或 em外边距属性值值说明auto设置外...
vue中，sapn元素可以设置外边距吗
06-02
在 Vue 中，`<span>` 元素是内联元素，它默认不支持设置外边距。但是你可以将 `<span>` 元素设置为块级元素，然后再设置外边距。有以下两种方式可以实现： 1. 使用 `display: inline-block` 将 `<span>` 元素转换为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值