Div有不同的高度，他们的高度是从哪里继承来的？
Div元素的高度是由其内容决定的。具体来说，Div元素的高度可以通过以下几种方式来确定：
- 内容高度：如果Div元素内部有文本、图片或其他元素，那么Div元素的高度将根据这些内容的高度来自动调整。
- 指定高度：可以通过CSS样式表中的height属性来显式地指定Div元素的高度。例如，可以使用像素（px）或百分比（%）来设置高度值。
- 内边距和边框：Div元素的高度还会受到其内边距（padding）和边框（border）的影响。如果设置了内边距或边框，那么Div元素的实际高度将包括这些额外的空间。
- 外部高度限制：如果Div元素被包含在其他元素中，并且这些父元素设置了高度限制，那么Div元素的高度将受到父元素高度的限制。
总结起来，Div元素的高度是由其内容、指定的高度、内边距和边框以及外部高度限制共同决定的。根据具体的需求和设计，可以通过调整这些因素来控制Div元素的高度。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
请求移动版本demo？
官方文档、即时通信 IM
请描述您的问题
标题：DEMO运行指引 - 云通信 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/269/4196
有没有移动版本的demo，另外这个demo效果和网易比起来有点差距啊？
浏览 194提问于2018-02-03
3回答
CSS背景仅在应用边框或填充时延伸
html、css
h1 {
background-color: yellow;
}
.warning {
background-color: black;
color: red;
}
.warning h2 {
margin: 100px 0;
}
p {
background-color: cyan;
}
<h1>LA Fitness</h1>
<div class='warning'>
<h2>This is a heading</h2>
Warning
&l
浏览 0提问于2017-01-24得票数 0
1回答
输入宽度100%和边距/填充
html、css
如何使用具有100%宽度和边距/填充的输入？？
当输入没有焦点时，宽度比父元素宽2个像素，但在焦点上宽度是对的吗？如何解决这个问题？！:-/
jsfidle
代码
input, textarea {
width:100%;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
input, textarea, button {
display:inline-block;
浏览 3提问于2012-11-08得票数 2
回答已采纳
1回答
子女保证金与父母边界
css、border、margin
我有一个带小孩的盒子。这孩子有毛边。如果我在父元素(div.box)上设置了一个边框，元素的高度就会发生变化，如下图所示。诀窍在哪里？
.box {
background: #0F3;
border: 1px solid #000;
}
.box-border {
background: #0F3;
}
.text {
margin: 40px;
}
<div class="box">
<div class="text">Content</div>
</div>
<div
浏览 0提问于2016-02-12得票数 0
回答已采纳
1回答
为什么添加边框会改变高度计算？
html、css
我有两个div容器，一个有边框，一个没有边框。
在这两个容器中，我得到了一个p段落，其边距为1em。
显然，这两个容器应该有相同的高度。
令人惊讶的是，火狐、Chrome、Safari和IE的情况并非如此。
CSS:
p { display: block; margin: 1em }
HTML:
<div>
<p></p>
</div>
<div style="border: 1px solid black">
<p></p>
</div>
这种
浏览 3提问于2013-07-19得票数 3
回答已采纳
1回答
负缘底在FF和IE中被完全忽略.这是个虫子吗？
html、css、firefox
首先，我要说，我不需要帮助解决这个问题--我自己可以很容易地解决我的具体问题。但是，我确实需要帮助理解为什么会发生这种情况--并且有可能确定它实际上是一个bug，所以我可以报告它。
问题是带有overflow:hidden的父容器包含一个带有负margin-bottom的子容器，该子容器又包含一个或多个floated项，后面跟着一个clear (即。它的高度取决于漂浮的孩子).似乎完全忽略了负值底部的边际。
我不希望孩子的内容在负的底限中扮演任何角色.无论孩子的内心是什么，我都希望负边际会得到尊重，而内容会被父母的overflow: hidden“切断”。
TL；博士:下面有一个更简单的例子
浏览 3提问于2017-10-18得票数 1
1回答
<body>和第一个<div>之间的神秘填充，在向<div>添加边框时消失。
html、css、header
请看这把小提琴
身体和“头”之间有一个奇怪的填充物。如果我在"header“div中添加一个边框，它就会消失。边缘塌陷和身体边缘似乎不是这里的问题。
提前感谢！
这是html
<body>
<div class="header">
<a href="#"><div class="photo"></div></a>
<div class="footer"></div>
</di
浏览 2提问于2014-12-25得票数 3
回答已采纳
4回答
不知道txt文件内容是什么，放在什么地方，需要服务端开启http功能么？
官方文档、SSL 证书、http
请描述您的问题
标题：自动诊断结果查看指引 - SSL证书 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/400/6760
浏览 2134提问于2018-01-27
2回答
Div在SVG标签之后见底
html、css、svg
HTML： <div id="parent_div">
<svg id="svg_icon" viewBox="0 0 20 20"><path d="M14.38,3.467l0.232-0.633c0.086-0.226-0.031-0.477-0.264-0.559c-0.229-0.081-0.48,0.033-0.562,0.262l-0.234,0.631C10.695,2.38,7.648,3.89,6.616,6.689l-1.447,3.93l-2.664,1.227c-0.354
浏览 15提问于2019-01-05得票数 0
回答已采纳
2回答
为什么宽度为1px的边框会使div增加20个像素？
html、css
下面的html文档有两个id='without，一个有边框(id='with')，另一个没有边框(Div)。带有边框的div (至少在firefox和chrome上)比带有边框的div要高得多。
我原本期望它们的高度最多相差2个像素，然而，alert告诉我它们的高度相差了19个像素。
我不明白为什么会这样。
<!DOCTYPE HTML>
<html>
<head>
<title>Height of divs with/without a border</title>
<script type=&
浏览 2提问于2012-11-29得票数 5
回答已采纳
3回答
我知道在CSS中框的高度是内容的高度，不包括边距和填充，但是为什么在这个示例中，如果你在包含div的地方取消对border:行的注释，div的背景色是否会延伸到第一段以上，而如果你没有边框，就不会？
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title></title>
<style type="text/css">
浏览 0提问于2010-06-30得票数 4
3回答
如何实现垂直对中与可选的额外元素和相邻的匹配列，在纯CSS，没有表？
html、css、vertical-alignment、multiple-columns
我有一个问题，在布局要求非常严格的电子商务网页。我们希望在产品描述的同时显示产品图像，并在图像下面添加一些关于产品的可选额外信息。宽度受整个页面布局的限制，而高度可能是可变的。答案似乎是“你不能用纯CSS来做这件事”。
下面是一个模拟：
标记的宽度是372+12+178=562，在边框中留下8 8px。图像和描述区域有2px边框，总共有8px水平像素和562+8=570。
我已经得到垂直对中的图像大部分排序，什么打破了设计是可选的‘额外信息’面板。该站点由PHP生成，如果该产品的数据可用，该站点还可以包含该额外信息的<div>。如果它是空的，如果它有助于解决设计问题的话，我很
浏览 6提问于2012-09-12得票数 1
回答已采纳
3回答
DIV内部填充
html、css
为什么添加一些填充会影响DIV框之外的元素？填充不应该在DIV的边框和内部的contents 之间创建一些空间吗？如何在不影响DIv框外的元素的情况下创建此空间？
浏览 2提问于2016-01-06得票数 1
回答已采纳
3回答
我有一个带有嵌套h2元素的banner div。当我向div添加一个边框时，它看起来会变大。但是没有内容添加到div中。我有点困惑。以下是场景：
<body>
<div id="easel">
<div class="banner">
<h2>One Column Layout</h2>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum totam quid
浏览 0提问于2015-06-12得票数 1
3回答
边距占用空间，但没有背景
html、css、margin
我有树层:菜单，内容和页脚。
内容层有白色背景。当我将另一个div放进内容层中时，它设置了边距，而不是边缘顶部的白色背景。因此，我的文本仍然定位在我的内容层的上边框，在菜单和页脚之间有20‘t空间，这是我不想要的。
#textfield {
margin: 20px;
}
我怎么解决这个问题？
浏览 3提问于2013-12-30得票数 0
回答已采纳
2回答
在ie7中继承父Div页边距的嵌套元素
html、css、internet-explorer-7
试图找出为什么在IE7中，嵌套的输入元素占据了父div的边缘。因此，在本质上，利润率翻了一番。
<style>
<!--
h1.redsubhead{font-size:14px;}
.accountInfo,.loginInfo{-moz-border-radius: 6px 6px 6px 6px;background: #EBFBFF; border: 1px solid #8DCAD9;margin-bottom: 30px;padding:10px;}
#ai_pw_wrap,#li_pw_wrap{border:1px so
浏览 0提问于2010-08-10得票数 2
1回答
为什么父母会显示孩子的offsetTop值？
javascript、html、css
我有一个div元素(父元素)，它包含另一个div元素(子元素)。
子元素具有通过CSS设置的margin-top : 30px。当我计算父程序的offsetTop时，它会报告30px，即使父程序没有设置任何边距！
更奇怪的是，一旦我在父服务器上设置了边框，那么offsetTop就会按需要工作。请看这个。
为什么在父节点上放置边框会改变它的offsetTop值？
浏览 2提问于2014-03-07得票数 2
回答已采纳
3回答
为什么一个孩子的垂直边距不扩展他们的父容器？
html、css、margin
我遇到过这样的情况:我需要一个孩子的保证金来扩展父容器。我发现父程序之外的空间被分配了，但是父服务器本身没有被扩展。然后，我发现通过将overflow: hidden添加到父程序中，我可以解决这个问题。
有人能解释一下为什么会这样吗？
我已经发现，向父级添加任何填充或边框值也可以解决这个问题。
section {
background: black;
//overflow: hidden; /* toggle this */
//padding: 1px; /* or toggle this */
//border: solid 1px green; /*
浏览 2提问于2012-07-26得票数 33
回答已采纳
3回答
关于非浮动元素的保证金问题
html、css
我给了两个div内边栏div 20便士的保证金。但出于某种原因，两家公司之间的差距只有20%，应该是40%。20便士来自box1，20便士来自box2。我是不是错过了一些小事。请指出。
Fiddle:
HTML:
<div class="sidebar">
<div class="box1 common">
<p>Text is here</p>
</div>
<div class="box2 common">
浏览 5提问于2014-06-06得票数 0
回答已采纳
3回答
我想知道一个元素的真实高度，不管它里面有什么。这很简单。当我放下元素的边框，注意到一个奇怪的行为时，问题就开始了，请看这里：
First div: 122 2px: OK (儿童高度100 2px，子空间20 2px，边框2px)
.bordered {
border: 1px solid #000;
}
第二个div: 120 OK :OK(儿童高度100 OK，子空间20 OK)
.display-inline-block {
display: inline-block;
}
第三版：100 div:什么？利润在哪里？
我使用display解决了这个问题:内联块对我来说很好
浏览 0提问于2014-04-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
