div 标签内的填充导致更改高度 div答案

【问题标题】：padding inside the div tag cause change the height divdiv 标签内的填充导致更改高度 div
【发布时间】：2016-11-27 12:38:54
【问题描述】：

我用 HTML 和 CSS 设计了一个页面布局，但是当我为“Left for logo”div 设置填充时，这个 div 的高度增加了，我失去了页面的排列。

另外，由于我是CSS布局的初学者，请告诉我我的页面是正确的。

HTML

<!doctype html>
<html lang="fa">
    <head>
        <meta charset="utf-8">
        <title>homepage</title>
        <link href="css/home-stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header class="header-container">
            <div class="header-area"></div>
            <div class="logo-ads">
                <div class="left">
                    Left for logo  <!-- Set Div As your requirement -->
                </div>
                <div class="right">
                    Right for ads<!-- Set Div As your requirement -->
                </div>
            </div>
        </header><!-- end of header -->
        <div class="navigation">
            navigation
        </div><!-- end of nav -->
        <div class="main">
            main content
        </div><!-- end of main -->
        <div class="footer-container">
            <div class="footer-end">
                footer
            </div>
        </div><!-- end of footer -->
    </body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
/* header elements */
.header-container {
    width: 100%;
}
.header-area {
    height: 35px;
    width: 100%;
    background-color: #bb0700;
    padding-right: 0px;
}
.logo-ads {
    height: 110px;
    width: 1000px;
    background-color: #CFD1A9;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    z-index: 0;
}

.left {
    float: left;
    height: 110px;
    width: 30%;
    background-color: #F9F9E4;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    box-sizing: border-box;
}
.right {
    float: right;
    width: 70%;
    height: 110px;
}
.navigation {
    height: 35px;
    width: 1000px;
    background-color: #2A2929;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    color: #fff;
    z-index: 1;
}
.main {
    height: 1000px;
    width: 1000px;
    background-color: #F7E3E3;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    z-index: 2;
}
.footer-container {
    height:35px;
    width: 1000px;
    background-color: #F2F1F1;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    z-index: 3;
}
.footer-end {
    height: 35px;
    width: 1000px;
    background-color: #bb0700;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    z-index: 4;
}

【问题讨论】：

我相信你正在寻找这个：stackoverflow.com/questions/779434/….
啊，你刚刚被box-sizing这个东西咬了！您可以设置box-sizing 或更改您的身高。
@user3593846，谢谢，这是一个很好的解决方案。

标签： html css

【解决方案1】：

padding 属性定义了内容和边框之间的距离。所以如果你在左边添加 10px 的 padding，元素的左右边框之间就会多出 10px 的空间。如果您想添加填充但保持边框的大小，只需通过您的填充减少高度/重量属性

#example{
height:70%;
padding-top:30%;
}

【讨论】：

【解决方案2】：

您所要做的就是将overflow: hidden; 添加到徽标和广告 div 的容器中。那是.logo-ads。然后您可以使用padding在“徽标左侧”(.left) 中添加所需的填充量

.logo-ads {
    height: 110px;
    overflow: hidden;
    width: 1000px;
    background-color: #CFD1A9;
    padding-right: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    z-index: 0;
}

将overflow: hidden; 添加到您的.logo-ads 类中

【讨论】：

【解决方案3】：

我可以看到您开始了解 CSS，并尝试通过实践来了解更多信息。我希望这对你有一点帮助，你一直在问问题，直到你变得很棒，然后你回来帮助新人，我们都去过那里。

首先，让我们确保您了解 CSS 盒子模型 CSS BOX MODEL

每个元素都由内容 + 内边距 + 大小（宽度/高度）+ 边框 + 边距组成。如果您不想考虑这些元素，可以使用

element {box-sizing: border-box;} // The width and height properties (and min/max properties) includes content, padding and border, but not the margin

不需要 0 数量的单位

您不需要在任何 0 值中声明单位，因为 0em、0px、0% 都是相同的。 0. 节省您的时间和文件大小。

速记

css 中的简写不仅大大减少了您的写作时间，而且还减少了文件的大小，始终尽可能减少是一个好习惯。而不是写：

div {
  padding-top:10px;
  padding-right:8px;
  padding-bottom:5px;
  padding-left:3px;
}

您可以简写它，始终遵循以下顺序：TOP、RIGHT、BOTTOM、LEFT

div {
  padding:10px 8px 5px 3px;
}

花车是魔鬼嘲笑你的方式

在布局网站时不应依赖浮动。如果您在一个应该向左/向右浮动的部分中有一个图像，或者像这样简单的东西，那很好；但是使用浮动管理布局将花费您的时间和精力。浮点数带来了很多问题，不值得费心修复所有问题。有很多网格系统和框架，例如 Bootstrap 和 Foundation，可以为您涵盖所有这些。这些麻烦可能包括：

浏览器以不同方式呈现某些类型的元素
不同的显示类型（inline、inline-block 和 block 是最常见的）定位不同
你必须清除你的浮动，否则你的布局会变得一团糟
没有简单的方法使用浮动或等高垂直居中元素
您将无法使用媒体查询轻松地重新排列它们
它们在 DOM 中的渲染速度很慢

所以最好的办法是使用网格系统进行布局并使用 flexbox 排列元素

了解网格系统

如果您不熟悉 CSS 网格系统，我们将从快速定义开始。基本上，网格系统是一种允许内容以一致且易于管理的方式垂直和水平堆叠的结构。此外，网格系统代码与项目无关，因此具有高度的可移植性，因此可以在新项目中采用。

了解弹性盒

CSS3 灵活框或 flexbox 是一种布局模式，用于在页面上排列元素，以便当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素的行为可以预测

所以现在 flexbox 得到了高度的支持：http://caniuse.com/#search=flex，除了 Internet Explorer 9 和更低版本，即使这样也有 polyfills，如果你想支持的话，你可以搜索一个，它们很容易也执行。

如果你想学习使用 flexbox 可以做的很棒的事情，Wes Bos 在他的网站上有一个非常好的教程

我希望这些提示对您有所帮助，如果您需要其他任何内容，请联系我。

【讨论】：

谢谢佩德罗，我有 2 个问题：
谢谢佩德罗，我有 3 个问题： 1-请让我知道我的页面布局和 css 代码是我必须考虑的吗？ 2-我有一个用 html4 和 css 和 php+mysql 设计的网站，但是我使用了 table 而不是
，我使用
用 html5+css3 重建它所以首先我想练习
和修改它适用于响应式移动设备，因为我无法将新设计与响应式设计混合使用，我在正确的位置吗？ 3-我有一些建议我使用Bootstrap，但是由于我们必须将Bootstrap样式表的链接添加到我们的页面中，这样是否很好并且我们失去了独立性？谢谢
1- 您的代码没问题，没有任何问题，并且可能比我使用过的许多 100k+ 访问/月的网站要好。 2- 表格设计对于响应式网站来说真的是死路一条。尽管在 HTML5 中 div 应该用作最后的资源。 html5 中的关键代码是语义。您不仅有页眉/页脚，还有 main/section/article/aside/nav 和许多其他更适合的元素。这是可访问性的关键，如果我知道的话，谷歌甚至可能会因为正确使用这些标签而提高您的排名。
3- Bootstrap 是一个旨在让您轻松进入开发的框架，您可以将 bootstrap 样式表放在您自己的样式表之前。由于 CSS 的“级联”部分，如果您的样式在之后或更具体，则您的 css 将占上风。最重要的是，尽量不要使用 !important 为您完成这项工作。你需要它真的很少见。