Cutup #7 Box-sizing

cutup-7-box-sizing.markdown

Cutup #7 Box-sizing

The box-sizing CSS property defines how the user agent should calculate the total width and height of an element. -MDN

Article https://medium.com/p/61ed487b65f1/

A Pen by nana on CodePen.

License.

index.html

<div class="title">
	<h5>Cutup #7</h5>
	<h1>Box-sizing</h1>
	<p class="title-definiton">The box-sizing CSS property defines how the user agent should calculate the total width and height of an element.</p>
	
</div>

<!-- No padding and border -->
<div class="parent">
	<p class="title">Width 300px</p>
	<div class="child content-box">
		<p>🦊content-box</p>
	</div>

	<div class="child border-box">
		<p>🐻border-box</p>
	</div>	
</div>

<!-- Padding 50px-->
<div class="parent">
	<p class="title">Add padding 50px</p>
	<div class="child content-box padding">
		<p>🦊content-box</p>
	</div>

	<div class="child border-box padding">
		<p>🐻 border-box</p>
	</div>	
</div>

<!-- Border 30px-->
<div class="parent">
	<p class="title">Add border 30px</p>
	<div class="child content-box border">
		<p>🦊content-box</p>
	</div>

	<div class="child border-box border">
		<p>🐻 border-box</p>
	</div>	
</div>

<!-- Padding 50px + Border 30px-->
<div class="parent">
	<p class="title">Add padding 50px + border 30px </p>
	<div class="child content-box padding border">
		<p>🦊content-box</p>
	</div>

	<div class="child border-box padding border">
		<p>🐻 border-box</p>
	</div>	
</div>

<div class="footer">
	<h5>Please check this article.</h5>
	<a class="c-btn" href="https://medium.com/design-code-repository/cutup-7-box-sizing-61ed487b65f1" target="_black">Go to the Medium</a>
</div>

style.scss

// Global style
body {
	color: #666;
	font-family: roboto Mono;
	font-size: 17px;
	font-weight: 600;

	// Flex box - center
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}

p {
	background-color: white;
	margin: 0;
	text-align: center;
}

.title {
	text-align: left;
	padding: 20px 0;
	width: 600px;
}

.title-definiton {
	width: 500px;
	margin-bottom: 30px;
	text-align: left;
	margin-left: 0;
}

// Box-sizing

.parent {
	background-color: lightblue;
	width: 600px;
	margin: 20px auto;
}

.child	{
	background-color: lightsalmon;
	width: 300px;
	margin: 20px auto;
}

.content-box {
	box-sizing: content-box;
}

.border-box {
	box-sizing: border-box;
}

.padding {
	padding: 50px;
}

.border {
	border: 30px solid midnightblue;
}


//Footer
.footer {
	margin: 60px 0;
}

.c-btn {
  text-decoration: none;
  padding: 8px 18px;
  border: 2px solid #666;
	border-radius: 5px;
	color: #666;
	transition: all 0.3s ease-in-out;

	&:hover {
		background-color: lightsalmon;
	}
}