外边距溢出问题

最新推荐文章于 2022-08-09 02:30:00 发布
最新推荐文章于 2022-08-09 02:30:00 发布
阅读量480 收藏 1
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49353940/article/details/107376757
版权

解决外边距溢出

在特殊情况下，为子元素设置上外边距，会作用到父元素上
特殊情况：
1.父元素没有上边框
2.子元素的内容区域的上边沿与父元素内容区域的上沿重合
解决方案：
1.给父元素加上边框
弊端：影响的父元素的实际占地高度
2.给父元素添加上内边距
弊端：影响的父元素的实际占地高度
3.在子元素之前添加一个空table标签


在这里插入图片描述

倩楠楠
关注
专栏目录
8招解决文档流中外边距叠加（溢出）问题（BFC解决方案）
weixin_44316351的博客
03-15 609
相信很多学习前端的朋友都会遇到这样一个问题，当一个父元素和它的子元素同时写了margin-top或者margin-bottom属性时，好像只有父元素才会生效，而它的子元素却不会生效。很多朋友最开始遇到这个问题可能会不知所措，那么我今天就来给大家讲一下关于这个问题怎么解决。 首先，这个现象叫做：“外边距叠加（外边距溢出）”。那么要满足什么样的条件，才会发生这种现象呢？ 三个条件： 父元素没有上边框...
margin-top上外边距溢出
weixin_45048117的博客
04-16 420
设置一组嵌套div时，给子元素div设置margin时，我们会发现margin-top不是我们预期的样子,子元素的margin-top会作用到父元素身上。 预期margin--top样式 实际结果 上外边距溢出到父元素 解决： 1：为父元素设置上边距。border-top:1px solid #ddd;(弊端：父元素高度变化。不提倡) 2：为父元素设置内边距取代外边距。（弊端：父元素高度改变。不提倡） 3：在子元素div前增加空的<table><table/&gt..
上外边距溢出处理
weixin_38149459的博客
07-25 437
外边距溢出处理 #el:before{ content:""; display:table; }
margin上外边距溢出问题
weixin_44343449的博客
06-21 1480
问题：当为div 的第一个子元素设置margin-top时,会作用到父元素身上。 解决： 1：为父元素设置上边距。border-top:1px solid #ddd;(弊端：父元素高度变化。不提倡) 2：为父元素设置内边距取代外边距。（弊端：父元素高度改变。不提倡） 3：在第一个子元素处增加空的(提倡) ...
外边距问题及解决方法
weixin_60542090的博客
08-09 97
本身属性为display:block;的元素 称为块级元素常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol本身属性为display:inline;的元素称为行级元素常见行级元素：span,strong,em,i,a,b本身属性为display:inline-block的元素称为行级块元素常见行内块元素：img、input(表单元素后续会讲到)没有设置宽高的时候，宽继承父元素的宽度，高度由内容撑开默认独立成行——默认垂直布局。...
外边距问题及解决方法笔记
WWW1260782205的博客
07-20 300
本身属性为displayblock;的元素称为块级元素常见块级元素div,h1-h6,p,ul,li,dl,dt,ol本身属性为displayinline;的元素称为行级元素常见行级元素本身属性为displayinline-block的元素称为行级块元素常见行内块元素img、input(表单元素后续会讲到)没有设置宽高的时候，宽继承父元素的宽度，高度由内容撑开默认独立成行——默认垂直布局宽度默认由内容撑开高度默认由内容撑开可以设置宽高。...
css拓展--盒子外边距塌陷/合并问题及其解决方法
zxn200125的博客
10-16 909
盒子外边距塌陷/合并问题及其解决方法
css——元素的显示模式及外边距重合问题解决
yoghurt&girl的博客
06-04 311
外单线你发的
html盒子距离上边距50px,Margin的垂直外边距问题
weixin_33148993的博客
06-18 1592
做练习的时候遇到一个margin的问题，代码结构如下，给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素，结果却是子元素div和父元素body一样高，并且距离上边距50px,如下图(a)：html{width: 100%;height: 100%;background: red;}body{margin: 0;padding...
【css学习】内容生成解决外边距溢出和浮动高度问题
李光 未来科技
01-20 1076
1、外边距的溢出情况 在某些特殊的条件下，为子元素设置上外边距时，有可能会作用到父元素上！ 问题视图： （1）d3是d2的父元素，左边的是问题视图，我的目的是实现右边的效果，想让d2在其父元素的中间，而不让其父元素有影响 上边是问题，接下来解决办法 解决办法1、在父元素的第一个子元素位置处，增加一个空 &lt;style&gt; #d1, #d3 { width: 20...
css外边距溢出处理方法,CSS高度坍塌和外边距溢出问题及解决方法
weixin_30399511的博客
08-04 1666
高度坍塌成因父元素div未设置高度子元素全部设置浮动(float: left | right;)，浮动元素脱离文档流且不占页面空间由于父元素为设置高度，高度靠内部子元素撑开，而今子元素全部脱离文档流，所以此时父元素的高度为0，给父元素和子元素设置边框(border: 1px solid #000;)或者显示父元素轮廓(outline: 1px solid #000;)，会出现子元素超出了父元素的区...
外边距溢出问题及解决的几种方法
weixin_42171432的博客
10-14 2002
大家晚上好，最近一直忙于工作与学习，时间越来越少来写写博客，今天写这篇博客，解决以前踩过的坑。【其中第4、5点无瑕疵，也是常用的必备良药~】 解决方法： 1.给父元素的上边框设置宽度（border-top-width）；弊端：如果设置父元素的上边框，有样式的瑕疵，对于强迫症的人，这是万万不可取得； 2.给父元素设置内边距（padding-top）解决；弊端：会影响到元素的实际占地高度； 3.给父元...
解决外边距溢出的问题和解决浮动塌陷问题
ScumStudy的博客
07-22 327
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
解决外边距溢出---内容生成
weixin_30685029的博客
04-04 121
<!DOCTYPE html> <html> <head> <meta charest="utf-8"> <title>解决外边距溢出</title> <style> #d1,d2{ width:200px; height:200px; background:re...
Css中清除浮动与外边距的溢出
weixin_43837268的博客
12-05 414
3.清除浮动: .clear:after{    content:"";    display:block;    clear:both; } 4.外边距的溢出 选择器:before{   content:"";   display:table; }  
CSS - 高度坍塌和外边距溢出问题及解决方法
weixin_30517001的博客
08-31 314
CSS - 高度坍塌和外边距溢出 高度坍塌 成因 父元素 div 未设置高度 子元素全部设置浮动（float: left | right;），浮动元素 脱离文档流 且 不占页面空间 由于父元素为设置高度，高度靠内部子元素撑开，而今子元素全部脱离文档流，所以此时父元素的高度为 0，给父元素和子元素设置 边框（border: 1px solid #000;）或者 显示父元素轮廓（out...
解决外边距溢出的几种方法
wangheng_hd的博客
09-18 277
解决外边距溢出的几种方法 给父元素增加 padding-top 缺点：增加加了父元素实际高度 添加父元素的边框， 缺点：影响布局效果 父元素增加 overflow：hidden / auto; 缺点：父元素就不能溢出显示的内容了，出现拖拽条 使用空<table></table>放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连 ...
css解决外边距溢出
qq_42183149的博客
07-17 1120
css解决外边距溢出 溢出就是当内容较大，元素区域较小，就会发生溢出效果。外边距溢出就是在父元素没设置边框情况下，为子元素设置外边距，导致了父元素跟着子元素一起产生位移。 如何解决： 1.给父元素添加上边框或上内边距，弊端：会改变父元素实际占地高度。 2.在第一个子元素前添加空table元素 ...
CSS盒子模型详解：外边距、边框与渲染模式
每个元素都可以看作是一个矩形，内容区域存放实际的文本或图像，而边框则围绕内容，内边距提供元素内容与边框之间的空间，外边距则是元素与其他元素之间的距离。通过调整这些属性，可以精确地控制元素在页面上的布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值