Padding affects container size? - html

Question

See the following Codepen sample:
https://codepen.io/anon/pen/yWXRvR
Concerning the tourplaces container at the bottom of the page (see CSS section commented as Article: tour dates: tourplaces at the bottom of the CSS):
Why is it that when I arbitrarily change the left or right padding of a .place (e.g. the first .place : padding-left: 0), the .place images as well as their container suddenly become different sizes?
The .place containers then become inconsistent, having different heights. This is not what I want - I want them to stay horizontally bottom-aligned like they initially were.
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?
/* 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>home</li>
<li>band</li>
<li>tour</li>
<li>contact</li>
<li>more <i class="fas fa-sort-down"></i>
<div>
merchandise
extras
media
</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>

Answer 1

Padding affects container size?
It depends, in this case it does, but only the height, not the width, since the width is defined.
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?
That is partially correct, it does affect the size of the image and also affects the text inside, making the height bigger or smaller depending on the value of the padding.
It is difficult to see how the width of the container is not changing because you have background-clip: content-box; this makes the background clipping on the limits of the content, then there is a part of the container that you are not able to see, if you put a border, lets say border: 1px solid red; within your .place class you would be able to see left and right paddings.
For this case I would use flex or grid, a grid example: (notice that I defined the height of the first container to 500px and the others are stretching itself to fill all the remaining space)
/* 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>