Html 为什么添加边框会使长方体大小增加2像素以上？
我的htmlHtml 为什么添加边框会使长方体大小增加2像素以上？,html,css,Html,Css,我的html 第01天 * { 框大小：边框框； } 身体{ 保证金：0； 字体系列：无衬线； } .集装箱{ 背景：#23424a； 颜色：白色； 保证金：0自动； 文本对齐：居中； } .简介内容{ 保证金：0自动； 边框：实心1px红色； } Lorem ipsum dolor sit。 Lorem ipsum dolor sit，amet Concertetur Adipising Elite。去盲肠的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲
第01天
* {
框大小：边框框；
}
身体{
保证金：0；
字体系列：无衬线；
}
.集装箱{
背景：#23424a；
颜色：白色；
保证金：0自动；
文本对齐：居中；
}
.简介内容{
保证金：0自动；
边框：实心1px红色；
}
Lorem ipsum dolor sit。
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。去盲肠的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区的去盲肠区
我的名言是“我的上帝，我的上帝，我的上帝，我的上帝！”！官员，
圣斗士
这是一个必要的建筑设计师
多洛？事实上，真正的Blanditis是一种快速的官方产品
大盲肠蠕动
在照明、性能和动物保护质量方面，最小累积量是一个明显的数字
《联邦宪法》中的布兰迪提斯法案
紫茎泽兰。埃塞，莫迪
除铜外，还包括在saepe nisi的软组织视学大部的指定代表
除voluptate外的其他常见疾病。日用品、日用品、日用品、日用品。
阿迪皮西，因西邓特。consequeuntur，natus nulla
如果元素是第一个子元素，它会将页边距顶部添加到父元素，并与父元素的页边距顶部折叠。查看文章以了解更多信息 这个问题已经在一份报告中得到了回答 如上所述，您只需添加以下css规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 01</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
background: #23424a;
color: white;
margin: 0 auto;
text-align: center;
}
.intro-content {
margin: 0 auto;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="container">
<div class="intro-content">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod unde rerum, deleniti ea obcaecati sint hic
odit dicta tenetur qui ut dolorum provident sit, atque, reprehenderit nulla voluptate! Officiis,
consectetur?</p>
<p>Iste ipsa enim delectus porro, ullam repellendus maiores quis rem debitis cum, necessitatibus architecto
dolor? Velit, ad quaerat blanditiis veritatis expedita totam vel voluptatem officiis officia ab modi
voluptatibus obcaecati.</p>
<p>Accusantium minima iusto nobis fuga hic explicabo unde illum, perferendis et animi aperiam quaerat, eaque
deleniti alias blanditiis exercitationem commodi repudiandae ullam consequatur incidunt reiciendis
repellat officia laboriosam. Esse, modi.</p>
<p>Expedita cupiditate iure odit, delectus placeat optio magnam assumenda mollitia aspernatur at saepe nisi
commodi natus excepturi voluptate. Recusandae nisi dolorem, necessitatibus optio aliquam repellat.
Adipisci, incidunt. Consequuntur, natus nulla.</p>
</div>
</div>
</body>
</html>
看起来是一样宽的。使用1px边框，可将1px添加到两侧（2px）。为了保持盒子的大小不变，“内部”盒子因为有2个边框而减少了2。那么高度呢？为什么高度变化太大了
.container {
overflow: auto;
}