jQuery innerWidth and innerHeight methods
Using the innerWidth and innerHeight methods, we get the width and height of elements, but taking into account not only the content, but also the internal margins - padding.
Let's get the width and height values of the paragraph #test, but using innerWidth and innerHeight, and output them to another paragraph. Let's say we have two paragraphs:
<p id="test">text</p>
<p id="out"></p>
CSS looks like this:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
In Javascript we write the following code:
let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);
As you can see, the values already differ by 10px, since internal paddings are taken into account, which in our case are 5px on all sides.
We can also easily change the width and height values of elements using the innerWidth and innerHeight methods. For example, let's set the width of the div #test1 to 250px, and the height of #test2 to 200px:
$('#test1').innerWidth(250);
$('#test2').innerHeight(200);
Complete the solution to the first task - output in the second paragraph under the div #wrapper the values of the width and height of the div #wrapper, this time taking into account the internal margins, but excluding the borders and external margins.
