Box dimensions
Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:
Image illustrating the relationship between content, padding, borders, and margins.
margin: 50px;
border: 15px;
padding: 100px;
width: 500px;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam molestie luctus nunc. Mauris sit amet purus. Nulla facilisi. Integer quis justo. Proin at dolor. Morbi eleifend. Nam tempor leo in tortor. Nam mollis diam. Donec pellentesque consectetuer libero. Praesent vulputate pulvinar lorem. Sed ante enim, commodo sed, convallis non, elementum a, mauris. Cras mauris nulla, placerat sed, posuere id, convallis tempus, nisl. Fusce mollis, augue vitae sollicitudin pretium, erat urna gravida diam, in egestas massa risus at metus. Suspendisse in arcu auctor mi sodales pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc. Pellentesque dictum. Sed lobortis, massa sit amet gravida imperdiet, erat urna commodo magna, a congue turpis justo et diam. Cras vel mauris id nulla fringilla aliquet. Ut pretium.
Vivamus volutpat erat nec sem. Suspendisse mattis tristique velit. Fusce at pede non arcu laoreet suscipit. Sed adipiscing orci vel sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante nunc, adipiscing sit amet, mattis ac, varius vel, enim. Pellentesque blandit arcu sit amet lacus. Proin tristique eros vitae dolor. Phasellus interdum sem id sapien. Etiam sagittis orci ut mauris. Sed vitae felis a libero venenatis consectetuer.
Sed urna. Vivamus et pede. Nulla lorem enim, euismod sit amet, egestas ac, porttitor sed, urna. Duis turpis dui, egestas vitae, ornare a, venenatis sit amet, sem. Proin sit amet diam. Curabitur iaculis sapien a nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fringilla. Maecenas nunc nisi, pellentesque vel, blandit vel, accumsan at, metus. Phasellus et mi. Fusce lacus ante, fermentum at, fermentum ut, scelerisque at, est. Pellentesque at purus in dui varius mollis. In hac habitasse platea dictumst. Cras aliquam. Praesent risus erat, aliquam sed, bibendum sed, rutrum nec, dui. Mauris a elit vel ante viverra sagittis. Pellentesque sit amet libero id lectus consequat laoreet. Nullam at ligula ut massa facilisis tincidunt.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam molestie luctus nunc. Mauris sit amet purus. Nulla facilisi. Integer quis justo. Proin at dolor. Morbi eleifend. Nam tempor leo in tortor. Nam mollis diam. Donec pellentesque consectetuer libero. Praesent vulputate pulvinar lorem. Sed ante enim, commodo sed, convallis non, elementum a, mauris. Cras mauris nulla, placerat sed, posuere id, convallis tempus, nisl. Fusce mollis, augue vitae sollicitudin pretium, erat urna gravida diam, in egestas massa risus at metus. Suspendisse in arcu auctor mi sodales pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nunc. Pellentesque dictum. Sed lobortis, massa sit amet gravida imperdiet, erat urna commodo magna, a congue turpis justo et diam. Cras vel mauris id nulla fringilla aliquet. Ut pretium.
Vivamus volutpat erat nec sem. Suspendisse mattis tristique velit. Fusce at pede non arcu laoreet suscipit. Sed adipiscing orci vel sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ante nunc, adipiscing sit amet, mattis ac, varius vel, enim. Pellentesque blandit arcu sit amet lacus. Proin tristique eros vitae dolor. Phasellus interdum sem id sapien. Etiam sagittis orci ut mauris. Sed vitae felis a libero venenatis consectetuer.
Sed urna. Vivamus et pede. Nulla lorem enim, euismod sit amet, egestas ac, porttitor sed, urna. Duis turpis dui, egestas vitae, ornare a, venenatis sit amet, sem. Proin sit amet diam. Curabitur iaculis sapien a nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fringilla. Maecenas nunc nisi, pellentesque vel, blandit vel, accumsan at, metus. Phasellus et mi. Fusce lacus ante, fermentum at, fermentum ut, scelerisque at, est. Pellentesque at purus in dui varius mollis. In hac habitasse platea dictumst. Cras aliquam. Praesent risus erat, aliquam sed, bibendum sed, rutrum nec, dui. Mauris a elit vel ante viverra sagittis. Pellentesque sit amet libero id lectus consequat laoreet. Nullam at ligula ut massa facilisis tincidunt.
