请参阅以下 Codepen 示例: https://codepen.io/anon/pen/yWXRvR
关于页面底部的 tourplaces 容器(参见 CSS 底部注释为 Article: tour dates: tourplaces 的 CSS 部分):
为什么当我任意更改 .place 的左或右填充时(例如第一个 .place : padding-left: 0)，.place 图像及其容器突然变得不同大小？ 然后 .place 容器变得不一致，具有不同的高度。这不是我想要的 - 我希望它们像最初那样保持水平底部对齐。
是不是因为padding让图片的宽度变窄，然后高度随之自动调整，让.place内容框变长？
/* General styles */
* {
box-sizing: border-box;
font-family: Arial;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
/* Specific styles */
/* nav */
nav {
position: sticky;
top: 0;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a{
padding: 16px 24px;
color: white;
display: block;
text-transform: uppercase;
}
nav ul li a:hover {
background-color: #ccc;
}
nav ul li:nth-of-type(5) {
/*position: relative;*/
}
nav ul li:nth-of-type(5) div a {
display: block;
color: black;
text-transform: capitalize;
}
nav ul li:nth-of-type(5) div a:hover a {
background-color: #ccc;
}
nav ul li:nth-of-type(5) div {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0 0 5px #aaa;
background: white;
}
nav ul li:nth-of-type(5):hover div {
display: block;
}
#search {
float: right;
}
#search i {
color: white;
padding: 16px 24px;
font-size: 18px;
transition: 0.5s ease;
}
#search i:hover {
color: #aaa;
}
.fa-sort-down {
vertical-align: text-top;
font-size: 18px;
transform: translateY(-25%);
}
/* Animation */
#bandpics {
overflow: hidden;
}
img#chicago,
img#la,
img#ny {
width: 100%;
display: block;
position: absolute;
animation-name: slide;
animation-duration: 18s;
animation-iteration-count: infinite;
}
img#chicago {
animation-delay: 6s;
}
img#la {
animation-delay: 4s;
}
img#ny {
animation-delay: 2s;
}
@keyframes slide {
0% { opacity: 1; }
22% { opacity: 1; }
33% { opacity: 0; }
88% { opacity: 1; }
100% { opacity: 1; }
}
/* Article: the band */
#band {
width: 100%;
position: relative;
margin-top: 50%;
text-align: center;
padding: 10% 30%;
background-color: white;
}
#band h2 {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.25em;
}
#band > h4 {
font-style: italic;
font-weight: 500;
color: #888;
}
#band h4::first-letter {
text-transform: capitalize;
}
#band p {
text-align: justify;
margin-bottom: 7%;
line-height: 1.3em;
}
#bandmembers {
overflow: hidden;
}
.bandmember img {
max-width: 50%;
}
.bandmember h4 {
font-weight: 100;
}
/* Article: tour dates */
/* Article: tour dates: sales lines */
#tourdates , #tourplaces {
background-color: black;
padding: 1% 30%;
}
#tourdates h2 {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.25em;
color: white;
text-align: center;
}
#tourdates h4 {
text-align: center;
color: #888;
font-style: italic;
}
#tourdates h4:first-letter {
text-transform: uppercase;
}
.month {
color: #888;
background-color: white;
padding: 3%;
border-bottom: 1px solid #ccc;
}
.month span:first-of-type {
text-transform: capitalize;
margin-right: 15px;
}
.month span {
display: inline-block;
}
div.month:nth-of-type(1) span:nth-of-type(2),
div.month:nth-of-type(2) span:nth-of-type(2) {
background-color: #f44336;
color: white;
padding: 5px 10px;
}
div.month:nth-of-type(1) span:nth-of-type(2)::first-letter,
div.month:nth-of-type(2) span:nth-of-type(2)::first-letter {
text-transform: uppercase;
}
div.month:last-of-type {
position: relative;
}
div.month:last-of-type span:nth-of-type(2) {
background-color: black;
color: white;
border-radius: 50%;
padding: 4px 10px;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
/* Article: tour dates: tourplaces */
#tourplaces {
overflow: hidden;
margin: -8px;
}
.place {
float: left;
width: 33.33333%;
background-clip: content-box;
background-color: white;
padding-left: 8px;
padding-right: 8px;
}
.place img {
width: 100%;
}
.place img:hover {
opacity: 0.60;
}
.place-info {
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
.place-info > *:not(p) {
text-transform: capitalize;
}
.place-info h4 {
white-space: nowrap;
}
.place-info h4:nth-of-type(2) {
color: #888;
font-weight: 400;
}
.place button {
background-color: black;
color: white;
padding: 10px;
}
@media only screen and (min-width: 1000px) {
#band {
padding: 5% 30%;
}
.bandmember {
float: left;
width: 33.33333%
}
.bandmember img {
max-width: 60%;
}
}<!-- from:
https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<nav>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#band">band</a></li>
<li><a href="#tour">tour</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#">more <i class="fas fa-sort-down"></i></a>
<div>
<a href="#merchandise">merchandise</a>
<a href="#extras">extras</a>
<a href="#media">media</a>
</div>
</li>
<li id="search">
<i class="fas fa-search"></i>
</li>
</ul>
</nav>
<div id="container">
<div id="bandpics">
<img id="chicago" src="https://www.w3schools.com/w3images/chicago.jpg" alt="Chicago">
<img id="la" src="https://www.w3schools.com/w3images/la.jpg" alt="LA">
<img id="ny" src="https://www.w3schools.com/w3images/ny.jpg" alt="NY">
</div>
<article id="band">
<h2>the band</h2>
<h4>we love music</h4>
<p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div id="bandmembers">
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
<div class="bandmember">
<h4>name</h4>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="bandmember">
</div>
</div>
</article>
<article id="tourdates">
<h2>tour dates</h2>
<h4>remember to book your tickets!</h4>
<div class="month">
<span>september</span><span>sold out</span>
</div>
<div class="month">
<span>october</span><span>sold out</span>
</div>
<div class="month">
<span>november</span><span>3</span>
</div>
</article>
<article id="tourplaces">
<div class="place">
<img src="https://www.w3schools.com/w3images/newyork.jpg" alt="NY">
<div class="place-info">
<h4>new york</h4>
<h4>fri 27 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="Paris">
<div class="place-info">
<h4>paris</h4>
<h4>sat 28 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/sanfran.jpg" alt="San Francisco">
<div class="place-info">
<h4>san francisco</h4>
<h4>sun 29 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</article>
</div>最佳答案
Padding affects container size?
这取决于，在这种情况下，它取决于高度，而不是宽度，因为宽度已定义。
Is it because the padding makes the image's width more narrow and then the height automatically adjusts along with it, making the .place content box longer?
这是部分正确的，它确实会影响图像的大小，也会影响里面的文本，根据 padding 的值使高度变大或变小。
很难看出容器的宽度是如何不变的，因为你有 background-clip: content-box; 这使得背景剪裁在内容的限制上，然后有您看不到的容器的一部分，如果您放置一个边框，可以说 border: 1px solid red; 在您的 .place 类中，您将能够查看左右填充。
对于这种情况，我将使用 flex 或 grid，一个 grid 示例:(请注意，我将第一个容器的高度定义为500px 和其他人正在拉伸(stretch)自己以填充所有剩余空间)
/* General styles */
* {
box-sizing: border-box;
font-family: Arial;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
#tourdates , #tourplaces {
background-color: black;
padding: 1% 10%;
}
/* Article: tour dates: tourplaces */
#tourplaces {
overflow: hidden;
margin: -8px;
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.place {
background-clip: content-box;
background-color: white;
padding-left: 8px;
padding-right: 8px;
border: 1px solid red;
}
.place.first-place{
padding-left: 25px;
height: 500px
}
.place.second-place{
padding-left: 0px
}
.place img {
width: 100%;
}
.place img:hover {
opacity: 0.60;
}
.place-info {
padding-left: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
.place-info > *:not(p) {
text-transform: capitalize;
}
.place-info h4 {
white-space: nowrap;
}
.place-info h4:nth-of-type(2) {
color: #888;
font-weight: 400;
}
.place button {
background-color: black;
color: white;
padding: 10px;
} <article id="tourplaces">
<div class="place first-place">
<img src="https://www.w3schools.com/w3images/newyork.jpg" alt="NY">
<div class="place-info">
<h4>new york</h4>
<h4>fri 27 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place second-place">
<img src="https://www.w3schools.com/w3images/paris.jpg" alt="Paris">
<div class="place-info">
<h4>paris</h4>
<h4>sat 28 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</div>
<div class="place">
<img src="https://www.w3schools.com/w3images/sanfran.jpg" alt="San Francisco">
<div class="place-info">
<h4>san francisco</h4>
<h4>sun 29 nov 2016</h4>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.
</p>
<button>buy tickets</button>
</div>
</article>关于html - 填充影响容器大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56198510/