HTML块元素在刷新时移动(更改边距)
HTML块元素在刷新时移动（更改边距）是由于浏览器的渲染机制导致的。当浏览器加载HTML页面时，会按照HTML文档的结构和CSS样式来渲染页面，其中块元素是指在页面中以块的形式显示的元素，如<div>、<p>、<h1>等。
当页面刷新时，浏览器会重新计算和绘制页面的布局，包括块元素的位置和大小。如果在刷新时更改了块元素的边距（margin），浏览器会重新计算并应用这些边距的变化，从而导致块元素在页面中移动。
这种移动可以通过CSS样式表中的margin属性来控制。margin属性用于设置元素的外边距，可以通过指定不同的数值来改变元素的边距大小。例如，可以使用margin-left属性来改变元素左边的边距。
HTML块元素在刷新时移动的具体效果和表现取决于CSS样式表中的其他属性和布局设置。例如，如果块元素的position属性设置为relative或absolute，它的移动可能会影响其他元素的位置。
在云计算领域中，HTML块元素的移动通常与前端开发和用户界面设计相关。开发人员可以利用CSS样式表和布局技术来控制块元素的位置和移动效果，以实现更好的用户体验和交互效果。
腾讯云提供了丰富的云服务和产品，其中与前端开发和HTML块元素相关的产品包括：
- 腾讯云CDN（内容分发网络）：通过在全球部署的节点，加速静态资源的传输和分发，提高网页加载速度和用户体验。了解更多：https://cloud.tencent.com/product/cdn
- 腾讯云Web应用防火墙（WAF）：提供全面的Web应用安全防护，包括防护DDoS攻击、SQL注入、XSS等常见攻击方式，保护网站和用户数据的安全。了解更多：https://cloud.tencent.com/product/waf
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于托管和运行网站和应用程序。可以根据实际需求选择不同的配置和规格。了解更多：https://cloud.tencent.com/product/cvm
请注意，以上产品仅为示例，实际选择和使用产品应根据具体需求和场景进行评估和决策。
相关·内容
3回答
不能移动带页边距的文本
、、、、
我试图编码我的第一个模板，我遇到了一个问题。我试图用页边距函数移动我的链接(home/“)，但它不移动。但是其他文本我可以用边距移动。那么为什么我不能移动一些具有边距功能的文本呢？
body {
margin:0;
padding:0;
}
#header {
background-color:#353C3E;
height:80px;
width:100%;
position:relative;
}
.header_content {
width:946px;
position:relative;
margin:0
浏览 7提问于2014-03-21得票数 0
2回答
为什么div显示属性inline-block将段落移动到左，该段落由margin:0 auto居中，没有显示属性。
.content
{
padding: 20px;
margin: 0 auto;
display: inline-block;
width: 900px;
height: 2000px;
}
content是div的类id，其中包含一些段落。当我添加display: inline-block时，段落移动到左侧。为什么会这样呢？
浏览 2提问于2016-06-08得票数 2
回答已采纳
在下面的代码中，我试图让h1元素具有上边距。当我在css中将位置设置为内联时，页边距-顶部不显示。但是当我把它改成inline-block的时候，它就发生了。我想知道有没有人能解释一下为什么会这样。谢谢。
编辑:这是jsfiddle中的代码：
这是我的HTML：
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="MyFirstWebsite.css">
<title>
M
浏览 3提问于2013-10-03得票数 11
回答已采纳
1回答
对于这个，我需要一个简单的解决方案，当一个元素的高度发生变化时，浮动布局就会中断。例如:悬停事件触发其他元素(表)外观。
以下是代码：
<html lang="ru">
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<article class="main">
<div class="zaglushka square&#
浏览 0提问于2015-09-17得票数 0
回答已采纳
我不知道是什么导致了这一切。正如您在中看到的，当我添加溢出:隐藏(或显示:内联块或浮动:左)时，它似乎将顶部和底部填充添加到向下移动的段落中。有人能解释一下是什么原因造成的吗？
.container{
background-color: blue;
width: 200px;
height:200px;
float: left;
margin: 0.5%;
overflow: hidden;
}
.problem{
background-color: rgba(52, 152, 219, 0.8);
width: 100%;
浏览 8提问于2015-01-25得票数 2
回答已采纳
3回答
我想更改一个简单的HTML表单的标签和输入之间的边距。标签位于输入字段的下方。当我设置一个类时，我可以改变其他属性，比如font-size，但不能改变边距。
浏览 7提问于2014-02-11得票数 3
所以我有了这个<span>元素，我想给它应用一个webkit-transform。不幸的是，我必须指定display属性为inline-block，这样才能工作。
span {
display: inline-block;
}
但是一旦我应用了这个属性，整个跨度就会发生变化。
您将注意到，在设置它之前，<span>元素会自动计算它的维数：
但是，一旦设置了属性，就会计算出维度，它们与以前自动计算的尺寸略有不同：
这一切为什么要发生？有没有一种方法可以应用inline-block而不改变<span>的维度呢？我不知道是否有空隙或空白处，但它确实
浏览 4提问于2016-10-27得票数 1
回答已采纳
我试图在一个垂直导航菜单添加填充周围的链接，我正在为一个面包店网站制作。
然而，当我做改变，要么页面变得不正常，根本没有变化，整个菜单移动或填充干扰悬停序列和某些链接时，没有突出显示在他们之上。
我尝试在%、em和像素中进行更改，但仍然一无所获。
我正在使用铬和崇高的文本顺便说，如果这有帮助的话。
下面是HTML：
<!-- NAVIGATION LINKS-->
<div id = "navibar">
<nav>
<a class = "navibar" href = "aboutt
浏览 4提问于2014-04-08得票数 0
回答已采纳
2回答
当我们在外部div上有一个边框时，我可以理解下面的第一个例子。边际崩溃，所以我们只能得到20px的边际。
但第二个例子似乎很奇怪，当我们只是
从外部div中删除边框
/*Fist example */
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>"float: l
浏览 2提问于2013-08-15得票数 1
2回答
CSS边距问题
、、
编辑:我的问题不清楚，所以我只是想澄清一下。
20px的左边距将div总共移动了20px，但输入控件似乎总共移动了40px。
原问题：
以下脚本是整个脚本，我没有其他脚本/样式附加到下面的脚本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
浏览 3提问于2011-01-31得票数 0
回答已采纳
2回答
防止浏览器围绕分页移动SVG元素
、、、、
我正在用基于SVG的图表制作仪表板。当我打印页面时，图表会四处移动，以防止页面内部出现分页符。这是不可取的，破坏了我的布局，但我不知道是什么原因造成的。
示例：
弹出预览
打印(只需查看预览，实际上不必打印)
结果:每页2满框，页边不均匀
期望值:每页 2.5ish方框，边距均匀
任何帮助都将不胜感激。
编辑：这里是一个。显然，这个问题并不影响所有浏览器/操作系统？
浏览 3提问于2014-05-07得票数 2
回答已采纳
header {
background-color: grey;
height: 118px;
text-align: center;
}
nav {
background-color: red;
height: 40px;
}
main {
background-color: blueviolet;
height: 400px;
text-align: center;
/*Why adding padding-top makes the white space disappear?*/
/*padding-top: 1px; */
}
footer {
background-col
浏览 2提问于2019-09-25得票数 1
回答已采纳
3回答
html中的每个文本似乎都有一个默认高度。比方说。h3元素。当我们在firebug中阻塞h3元素时，我们可以在该文本的上下看到额外的空格。显然，这无法避免使用reset.css。我也尝试了line-height属性。它不起作用。有其他选择吗？
代码如下：
<html>
<head></head>
<body>
<table>
<tr>
<td><h3>S
浏览 2提问于2013-05-31得票数 0
我有以下HTML
<body>
<header></header>
<h2>Title</h2>
</body>
使用以下CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
header {
float: left;
background: black;
height: 100%;
width: 150px;
}
IE10、Chrome26和Firefox20都在顶部显示了不需
浏览 0提问于2013-04-29得票数 4
回答已采纳
请看一下这两个链接：
HTML：
<!DOCTYPE html>
<body>
<div id="container">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div id="container2">
<p>Hola</p>
</div>
</body>
CSS：
h1
{
浏览 4提问于2013-08-26得票数 0
回答已采纳
我已经使用了html5头标记和其中的h1标记。在将标题中的h1元素的上限属性设置为0px之后，我设法删除了标题的上边距，但我希望标题中的h1元素具有大约15 0px的上限。
现在，当我尝试设置h1元素的顶部边距时，它还为我不想要的标题创建了一个顶部边距。
有人能帮我解决这个吗.？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="normalize.css" rel="s
浏览 5提问于2014-08-04得票数 11
回答已采纳
首先，我将向您展示我的代码：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Collapsing Margins Testing</title>
<style type="text/css">
img {
width: 300px;
height: 300px;
}
.first {
浏览 1提问于2016-05-05得票数 0
我尝试将一些(垂直堆叠的) display:block元素放入display:inline-block元素中。根据CSS规范，inline-block元素应该是一个包含块，所以它可以在其中包含display:block元素，并且这些元素不应该影响布局的其余部分。
然而，display:display内的block元素: inline-block元素会扰乱页面的其余部分；所以在inline-block中什么都没有，甚至是段落这样的基本元素也是如此；只有简单的文本才能避免扰乱页面的其余部分(我的意思是向下移动其他div，例如在这种情况下，左边的红色块向下移动了一行，上面有一个空白)。我使用的是Fi
浏览 0提问于2009-03-03得票数 13
回答已采纳
我在阅读“带有HTML5和CSS3的响应性网页设计”(ResponsiveWebDesignwithandCSS3) Chapter3流体布局时遇到了这个问题。作者试图将固定像素大小改变为基于百分比的流体尺寸。下面是html和css代码。
html：
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="#">something</a></li>
<li><a h
浏览 4提问于2015-05-15得票数 2
回答已采纳
div {
width: calc(100vh/6);
height: calc(100vh/6);
background: #fdc57b;
display: inline-block;
}
body {
background: #62374e;
}
#a {
margin-left: calc(14vh);
margin-top: calc(100vh/7.2);
}
#b {
margin-left: calc(49vw);
}
#c {
margin-left: calc(14vh);
margin-top: calc(161vh/5
浏览 0提问于2021-06-28得票数 0
回答已采纳
<!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>Tech
浏览 5提问于2021-04-19得票数 2
回答已采纳
3回答
当我在HTML 5文档中添加边框时，页面元素的移动出现了问题。
我希望包含标题元素(灰色)出现在屏幕的顶部，但它似乎从内部div (红色)获得了页边距。然而，如果我添加一个边框到标题，它出现在我期望的地方，红色的内部div只移动一点点！
(第一幅图片:无边框；第二幅图片:带边框)
我尝试过设置相对或绝对定位，使用div而不是头元素，将边距和填充设置为0，使用HTML4文档类型等。这是HTML去掉的所有内容，但仍然无法工作。它发生在最新的Chrome & FF上。
救命！！我错过了什么？？或者其他的解决办法(除了保留边界)？
HTML:
<!DOCTYPE HTML&g
浏览 8提问于2012-07-26得票数 7
回答已采纳
下面的css代码是由我写的，当我试图创建一个像mashable.com这样的固定标题，但无论我怎么努力，我似乎不能使logo.png出现与页边距:auto 19px;.Pleae帮助我，并告诉我我做错了什么。我是一个html和css的初学者，所以请温柔点。我想让徽标和导航列表排成一行。
header{position:fixed;
background:#333;
height:128px;}
h1{ display:inline;
float:left;
background:url(images/logo.png) no-repeat;
浏览 0提问于2013-07-11得票数 1
1回答
我一直在尝试让这个倒计时器对移动设备和小型设备的响应做出反应，但我一直在努力。理想情况下，我希望flex属性之间的距离随着屏幕变小而缩小，从而使倒计时更接近另一个，以便它适合任何大小的屏幕。不过，我不知道如何做。所以我尝试把'flex-direction: column‘放在@media部分，但是什么也没发生。随着屏幕变小，我也试图减小倒计时计时器的大小，但这也无济于事。 const countdown = document.querySelector(".countdown");
const interval = setInterval(() => {
浏览 15提问于2021-10-20得票数 0
我原以为，如果我给每个项目一个固定的大小，并用一些空白隐藏下划线，然后我拿走这个空白，它应该是没有问题的工作。但每当我悬停它的时候，它似乎仍在跳跃。请帮我弄明白为什么。
，这就是我到目前为止得到的：
.menu-container {
width: 180px;
margin: 0 auto;
}
.menu-item {
background-image: url('../img/menu/main_menu.png');
background-repeat: no-repeat;
display: block;
height: 47px;
m
浏览 1提问于2016-01-16得票数 2
回答已采纳
在我的HTML表单中，我有一个后跟一个标签<label ...>...</label>的链接<a href='...'>...</a>。我为链接设置了底部边距，如下所示：
form a {
margin-bottom: 10px;
}
当我使用Google Chrome控制台检查元素时，a标签的margin-bottom确实是10px。但是标签就在它正下方，没有空格。我如何在那里生成一些空间？
浏览 0提问于2013-05-28得票数 10
回答已采纳
我在使用这个基础代码让我的页面占据整个视区。
html {
height: 100%;
}
body {
min-height: 100%;
}
但我注意到，当我添加一个带有页边距的块元素时，页面大小会随着页边距的大小而变化。要进行演示，请在webkit浏览器中尝试此html：
<html style="height: 100%; margin: 0; padding: 0;">
<body style="min-height: 100%; margin: 0; padding: 0;">
<h1 styl
浏览 0提问于2016-01-13得票数 1
2回答
我在一个main div中有两个main div。我试着添加边距和填充一个大的数字来测试，但它就是工作。为什么我不能在它们之间添加边距/填充？请帮帮忙。
HTML
<div id="mainWrapper">
<header class="container">
<div id="nav2" class="container">
<ul class="nav2a">
浏览 0提问于2015-07-14得票数 12
回答已采纳
1回答
我有非常简单的开始代码：
<!doctype html>
<head>
</head>
<body>
<style>
.master {
background: green;
}
.master div {
background: red;
}
</style>
<div class="master">
<div>
abc
</div>
</div>
</body>
</html>
我也把它放在上。只有内部(红色) di
浏览 2提问于2014-07-23得票数 2
回答已采纳
3回答
我在html文件中有3个不同的div。
div {
width: 200px;
height: 200px;
position: absolute;
}
.second {
background: red;
left: 200px;
top: 200px;
}
.third {
background: green;
top: 400px;
left: 400px;
}
.first {
background: yellow;
}
<div class="first"></div>
<div clas
浏览 0提问于2017-02-21得票数 0
3回答
我有树层:菜单，内容和页脚。
内容层有白色背景。当我将另一个div放进内容层中时，它设置了边距，而不是边缘顶部的白色背景。因此，我的文本仍然定位在我的内容层的上边框，在菜单和页脚之间有20‘t空间，这是我不想要的。
#textfield {
margin: 20px;
}
我怎么解决这个问题？
浏览 3提问于2013-12-30得票数 0
回答已采纳
当我将#two设置为inline-block时，它从<p>中减去顶部/底部边距的16px，并将其添加到div内容框高度，因此它变成52px而不是20px。为什么会这样呢？
浏览 3提问于2013-03-05得票数 4
回答已采纳
3回答
我有一个关于HTML/CSS和某些元素的边距行为的基本问题。
为了阐明我的观点，我创建了这个小提琴：
你看，我应用了某种“重置”，并给所有的h1添加了一些样式。
在第一个示例中，来自h1的margin应用于框的外部，而在#c中，h1设置为display: inline;，它应用于框内。
为何会这样呢？
浏览 3提问于2013-01-16得票数 0
回答已采纳
4回答
.separator {
border: 1px solid #000000;
margin: 10px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Separator</title>
</head>
<body>
<div>
<
浏览 1提问于2017-03-03得票数 2
3回答
我正在使用各种css属性来查看它们是如何工作的。我的问题是，为什么当我设置“利润率最高”时，比-20便士更负，我的链接不再向上移动。设置更多负值，如-21 at及以上，根本不会将链接更多地移到顶部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<style>
nav { /*height: 60px;*/ border:
浏览 2提问于2016-02-18得票数 2
回答已采纳
我有一个非常简单的html。红色div位于蓝色div内部，顶部页边距为10像素。在非ie浏览器中，蓝色框与视区顶部的距离为10像素，红色div位于蓝色div的最上方。我期望的是ie的行为: red div必须与蓝色div的顶部相差10px。为什么非ie浏览器会呈现这样的效果？(我认为错误的行为是IE的，但为什么呢？)
那么，正确的方法是什么呢？
<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
background-color: #00f;
height: 50px;
浏览 0提问于2008-11-24得票数 5
回答已采纳
6回答
我试图将另一个div中的div移动一点，但当我使用
margin-top: 10px;
它在顶部形成了一个白色的缺口。以下是html：
<div id="topb">
<div id="selection">
</div>
</div>
下面是CSS：
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
浏览 6提问于2016-10-15得票数 2
回答已采纳
4回答
从我的站点的边框和边距的实际问题中衍生出来的，我做了这个测试示例，我认为它的行为有点奇怪：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
}
.outer {
width:100px;height:100px;
}
.inner {
浏览 0提问于2013-04-13得票数 2
回答已采纳
我正在解决一个CSS问题(实际上，只是帮助朋友学习HTML/CSS)，并遇到了一个奇怪的问题。如果您删除了<p>标记中的任何<div>中的内容，div就会向上移动。例如，删除“妈妈”一词而不删除<p>。据我所知，这是因为元素被设置为vertical-align: baseline，并且由于某种原因基线正在改变。我只是不知道它为什么会改变或者是什么导致了它的改变。
我要说的是，我不是为了让div对齐而请求帮助。这只是一个简单的问题，设置他们的垂直对齐‘顶部’。我只是想了解文档流是如何计算的。具体的问题是:为什么空的div向上移动？
演示：
UPDATE：这是一
浏览 0提问于2013-11-08得票数 3
<div id="title">
<h1>
Title
</h1>
</div>
我知道有一些默认的页边距以及h1标签。当我使用chrome dev工具检查它时，我发现div部件比h1部件小( h1的高亮区域比div大)。看起来div没有包含h1的边际，谁能告诉我为什么？
浏览 5提问于2013-05-06得票数 3
回答已采纳
1回答
我有一个论坛网站@
正如你所看到的，在标题中有一个背景问题，我不能设法设置一个全灰色的背景颜色。当我使用左边距代码时，它总是显示白色背景而不是灰色。
下面是我使用的代码：
你能告诉我我哪里错了吗？
浏览 2提问于2014-09-07得票数 0
3回答
我给了两个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回答
当我用<p>标记开始或结束HTML文档的一个部分时，它会在前面/后面的部分之间添加一个“无人认领”的空间。
示例：
<!DOCTYPE html>
<html>
<style>
header {background-color: gray}
div.content {background-color: lightblue}
footer {background-color:gray}
</style>
<head>
<meta charset="utf-8">
<meta name
浏览 4提问于2014-07-08得票数 3
回答已采纳
我想我只是得到了部分，现在我有另一个问题，我不明白。我有一个带有id="signin“的div，它在其他两个div中。这两个div没有任何填充或边框，当我在div上应用id="signin“时，它不会在上面创建任何空白。为什么会这样呢？带有id="signin“的div旁边的div会以任何方式影响它吗？
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</
浏览 3提问于2014-12-22得票数 3
回答已采纳
可能重复：
我有一个带有CSS类<div>的myclass。CSS类如下所示：
.myclass {
position: absolute;
width: 192px;
font-size: 11px;
background-color: #FFF;
padding: 15px 15px 0;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-webkit-box-sh
浏览 6提问于2012-12-07得票数 6
回答已采纳
2回答
问题解决了
在底部，在页面的最后一个元素和页脚之间，有一个空白，我试图使用Chrome工具来跟踪它的起源，但显然它不是由最后一个元素和页脚造成的。
巫术中唯一的元素--空间似乎来自于身体。我已经取消了body元素的任何边距或填充：
html,body {
margin: 0;
width: 100%;
padding: 0;
}
网站的兼容性仅用Chrome进行测试
浏览 3提问于2013-11-13得票数 0
回答已采纳
1回答
我有两个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
回答已采纳
3回答
即使在设置边距和填充身体和html为0，背景色在我的标题元素没有填补整个网站的顶部部分。
看上去是这样的：
这是我的html和css。
<body>
<header>
<h1>Test Website</h1>
</header>
<main>
<div>
<h2 >Test Website</h2>
浏览 12提问于2021-12-31得票数 1
3回答
我称span为div，它占用了利润率，但利润率:0汽车不起作用。有什么建议吗？
html
<div>
<span>
<h3>Paris Eurostar Breaks</h3>
<p>Curabitur fringilla mauris interdum nec magna</p>
</span>
</div>
css
div{
width:465px;
min-height:201px;
}
div span{
displ
浏览 7提问于2014-10-28得票数 8
回答已采纳
1回答
为什么当一个段落的位置是绝对的时候，顶部底部的填充比原来的增加了？如何将其设置为初始的？谢谢
<html>
<head>
<script>
pos {
position:absolute;
width:300px;
background-color:red;
color:yellow;
}
</[![enter image description here][1]][1]script>
</head>
<body>
<h3> prac
浏览 1提问于2016-01-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
