Width & Height of an Element

When setting the width and height properties of an element with CSS, you just set the width and height of theĀ content area.


To calculate the full size of an element, you must also add the padding, borders and margins.


Given the following CSS for an element, the total width equates to 640px:

border:30px solid red;


This is calculated as follows:

500px (width)

+ 40px (left + right padding)
+ 60px (left + right border)
+ 40px (left + right margin)

= 640px

<!DOCTYPE html>
		<title>My Document Title</title>
		<h1>My first Heading</h1>
		<p>Paragraph one</p>
		<div style="width:500px; padding:20px; border:30px solid red; margin:20px;">
			<p>Paragraph two</p>
		<p>Paragraph three</p>

Save & refresh browser:

My first Heading

Paragraph one

Paragraph two

Paragraph three

Leave a Reply