The CSS Box Model

When starting out using TTG plug-ins you see lots of options. Lots. And lots. And scattered throughout all these options you’ll see a whole bunch of sliders for Mantle and Core, margin, padding, and border. Getting a handle on these is probably my number one TTG tip.
Matt covers the Mantle and Core settings here.

Margin, padding, and border are all part of the css box model. And taking a little bit of time to understand this little bit of css nomenclature will alleviate a lot of confusion and make your TTG website designing much easier.
Inside most html elements, like paragraph tags <p>, division tags <div>, image tags <img>, etc is content. Inside a paragraph tag are characters like letters and numbers. Inside image tags are, not surprising, images. Inside division tags are other tags like headings <h1> paragraphs, images, other divisions, etc.
So inside of these (and more) html elements you have content. But there’s more to it than that. These and other html elements can also include space and borders around the content. Just think of it all as being a box with content inside and space on the outside: the CSS Box Model.

css mox model
css box model

All boxes have an inside and an outside. The box itself is the border between inside and out. Inside the box you have “something”. But this something doesn’t have to take up the entire box, sometimes you find a buffer between the contents and the edge of the box, like packing peanuts, or other padding (see what I just did there?).
Now inside your box you have the content and padding, then the border of the box.
Outside the border you can add space too. This is the margin. Use the margin to add space between items, like spacing your image thumbnails or providing space between the bottom of the masthead and the top of the navigation.

For more information on the css box model, visit the always helpful W3Schools.

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.3
Pages module 1.2.3
Cart Add-on 4.1.5
Client Response Add-on 7.1.2
Theater Add-on 1.2.4
WordPress Add-on 1.2.3
Publisher 3.2.2

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts