填充会影响容器的尺寸吗？

时间：2019-05-18 11:29:28

标签： html css

请参阅以下Codepen示例： https://codepen.io/anon/pen/yWXRvR

关于页面底部的 tourplaces 容器（请参见CSS底部注释为 Article：tour date：tourplaces 的CSS部分）：

为什么当我随意更改.place的左或右填充时（例如，第一个.place：padding-left：0），. place图像及其容器突然变得大小不同？ 然后，.place容器变得不一致，具有不同的高度。这不是我想要的-我希望它们像最初一样保持水平底部对齐。

是因为填充使图像的宽度更窄，然后高度随其自动调整，从而使.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>

1 个答案:

答案 0 :(得分：0)

  

填充会影响容器的大小吗？

在这种情况下，它取决于实际情况，但取决于高度，而不是宽度，因为定义了宽度。

  

是因为填充使图像的宽度更窄然后   高度会随之自动调整，使.place   内容框更长？

这是部分正确的，它确实会影响图像的大小，还会影响其中的文本，根据填充的值使高度变大或变小。

很难看到容器的宽度是如何变化的，因为您有background-clip: content-box;，这会导致背景限制内容的范围，因此容器的一部分无法如果要在边框上放一个边界，让我们在border: 1px solid red;类中说.place，您将能够看到左右边距。

在这种情况下，我将使用flex或grid，这是一个grid的示例：（请注意，我将第一个容器的高度定义为500px，而其他容器是伸展自己以填补所有剩余空间）

/* 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>

相关问题
最新问题