<section class="boxes">
		<h2>offsetWidth,offsetHeight</h2>
		<div id="box1">
			<strong>padding,border,scrollなし</strong>
			<p class="center"><span id="info_w1"></span><span id="info_h1"></span></p>
		</div>
		<div id="box2" class="padding">
			<strong>padding 10px</strong>
			<p class="center"><span id="info_w2"></span><span id="info_h2"></span></p>
		</div>
		<div id="box3" class="border">
			<strong>border 10px</strong>
			<p class="center"><span id="info_w3"></span><span id="info_h3"></span></p>
		</div>
 	<div id="box4" class="border border-box">
			<strong>border 10px<br>box-sizing border-box</strong>
			<p class="center"><span id="info_w4"></span><span id="info_h4"></span></p>
		</div>   
		<div id="box5" class="scroll">
			<strong>scrollあり</strong>
			<p class="center"><span id="info_w5"></span><span id="info_h5"></span></p>
      			<p class="left">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></p>

		</div>
	</section>
body {
  margin: 2rem 0;
  padding: 0;
}

.boxes {
  text-align: center;
}

.boxes div {
  width: 300px;
  height: 250px;
  background: #eef0e1;
  position: relative;
  margin: 3rem auto 0;
}

.boxes strong {
  margin-top: 10px;
}

.boxes .center {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.scroll {
  overflow: auto;
}

.scroll::-webkit-scrollbar {
  width: 17px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  background: #cfcd96;
}

.scroll::-webkit-scrollbar-track-piece:start {
  background: #eee;
}

.scroll::-webkit-scrollbar-track-piece:end {
  background: #eee;
}

.border {
  border: 10px solid #cfcd96;
}

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

.padding {
  padding: 10px;
}

.left {
  text-align: left;
}
  let w1 = document.getElementById('box1').offsetWidth;
  let h1 = document.getElementById('box1').offsetHeight;
	document.getElementById('info_w1').innerHTML = 'width:' + w1 + 'px × ';
	document.getElementById('info_h1').innerHTML = 'height:' + h1 + 'px';

  let w2 = document.getElementById('box2').offsetWidth;
  let h2 = document.getElementById('box2').offsetHeight;
	document.getElementById('info_w2').innerHTML = 'width:' + w2 + 'px × ';
	document.getElementById('info_h2').innerHTML = 'height:' + h2 + 'px';

  let w3 = document.getElementById('box3').offsetWidth;
  let h3 = document.getElementById('box3').offsetHeight;
	document.getElementById('info_w3').innerHTML = 'width:' + w3 + 'px × ';
	document.getElementById('info_h3').innerHTML = 'height:' + h3 + 'px';
	
  let w4 = document.getElementById('box4').offsetWidth;
  let h4 = document.getElementById('box4').offsetHeight;
	document.getElementById('info_w4').innerHTML = 'width:' + w4 + 'px × ';
	document.getElementById('info_h4').innerHTML = 'height:' + h4 + 'px';

  let w5 = document.getElementById('box5').offsetWidth;
  let h5 = document.getElementById('box5').offsetHeight;
	document.getElementById('info_w5').innerHTML = 'width:' + w5 + 'px × ';
	document.getElementById('info_h5').innerHTML = 'height:' + h5 + 'px';

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.