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.
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.
