I see on websites that they've used padding on elements that contain other elements in order to align the elements contained within it, and on other occasions they use margin on a contained element in order to distance itself within the larger element.

 

Why would they use both of these methods to align the element within? When they could just use padding on each element to align the elements contained within it? On some elements they would use both a border and an margin, but I don't see any point in the border when it's not actually visible on the page, it's just used to space the element in the middle of it's containing element, it's not actually coloured so I don't see the point in it.

 

And another thing, from inspecting the page element I see that they have about 4 elements to for the containing image in a part of the page...

 

<a class= "col-four client-pod">

<img class= "background-image">

<span class="overlay">

<span class="vertical-middle">

 

I don't really see what would be the point in all these elements, on the inspect element they all represent one image.

 

Go to thinkingjuice.co.uk to understand what I mean.

 

 

margins are like hard stops while padding is a cushion. In most of my limited experience the use of multiple classes are for multiple mechanics on the page. Like the example above the classes are for an overlay. The first I would assume to be something of a coloring I think due to the name of the class. The second would be the default image if the user did nothing, the third I would assume would appear when the user :hover'd or clicked a button to produce this element as an overlay, and the third one I would assume that this class deals with the position of the overly. So you see, reusable classes can be fun and time saving. classes do not belong to the element itself, but to any element you wish to style with it. Helping in the reduction of redundant coding. Some designer's feel that each part of the mechanic need's it's own class. Some put all of the mechanic in one class. It purpose is site driven. What they need to do, and how fast can they make formatting changes across the whole site as the content changes.

Edited January 26, 201511 yr by drt_t1gg3r

One thing to remember is that opposing margins collapse.

 

If you are using border box as your box-sizing (You should be) Then paddings and borders are placed inside the box whereas margins are outside.

 

Let me try to illustrate:

If you have a box that you specify to be 100px wide and add 20 pixels of padding either side, then the box will still be 100px wide, but the padding being put on the inside will leave 60px available for content / other Dom nodes inside, borders work much the same way.

If you add a 10px margin to either side then the box is still 100px wide, but takes up 120px of space in the Dom.

 

You can have -ve margin on an element, you cannot have -ve padding.

 

top and bottom margins & paddings won't work on inline elements.

 

You can set auto on margins to center block level elements.

 

Don't use margins or paddings to vertically center content, this results in magic numbers that are entirely circumstantial. This is bad. Make use of other centering techniques such as display: table.

Edited January 26, 201511 yr by rbrtsmith

Mr Smith could you say that margin is the opposite of padding? like if padding was on the outside of the dom?

They are very different but not opposite, the only thing oposite of a margin is a -ve margin.

Just a beginner here but.... I guess factors such how many objects are placed within the containing element would impact whether padding/margins were used? For the example shown where there's only one element within another then the decision to which to use would not really have much impact.

 

However if the container were to hold more than one item then margin would be best as this creates visual spaces around the contained elements (presuming they were the same class), rather than just the container and it's contents.

Just a beginner here but.... I guess factors such how many objects are placed within the containing element would impact whether padding/margins were used? For the example shown where there's only one element within another then the decision to which to use would not really have much impact.

 

However if the container were to hold more than one item then margin would be best as this creates visual spaces around the contained elements (presuming they were the same class), rather than just the container and it's contents.

 

Margins work well for this when you want equal spacing around a group of items because the opposing margins collapse.

One thing to remember is that opposing margins collapse.

 

If you are using border box as your box-sizing (You should be) Then paddings and borders are placed inside the box whereas margins are outside.

 

Let me try to illustrate:

If you have a box that you specify to be 100px wide and add 20 pixels of padding either side, then the box will still be 100px wide, but the padding being put on the inside will leave 60px available for content / other Dom nodes inside, borders work much the same way.

If you add a 10px margin to either side then the box is still 100px wide, but takes up 120px of space in the Dom.

 

You can have -ve margin on an element, you cannot have -ve padding.

 

top and bottom margins & paddings won't work on inline elements.

 

You can set auto on margins to center block level elements.

 

Don't use margins or paddings to vertically center content, this results in magic numbers that are entirely circumstantial. This is bad. Make use of other centering techniques such as display: table.

 

Ok, but can you tell me why they would use 4 elements which represent the same thing? I see why they would use the <img> tag but I don't see what would the point in all of those elements, the <a> and <span> tags.

 

<a class= "col-four client-pod">

<img class= "background-image">

<span class="overlay">

<span class="vertical-middle">

 

I see why they would include a <span> tag, in order to make the element inline, but why would they have 2 inline elements?

Edited January 26, 201511 yr by NullDrone

Well it's impossible to know from just looking at the html and those classnames, the css they contain could do anything.

 

But here is an assumption:

• The anchor is forming some part of a grid, but how much we don't know. 4 columns of how many? The fact it apeears that the image nested inside ius overlayed by a span tells us that the anchor will have a position of relative and display of block, or inline-block.
• The span.overlay shouldn't be indented because you cannot nest anything inside an image as it's a self closing tag.
• The image will give the a.col-four some height
• The span.overlay will have a position of absolute and the top, right, bottom, left properties all set to zero, this will make it overlay the image.
• The vertical middle span seems odd because If I were to vertically center a body of text over an image I would set this to display table, width & height 100%
• Then inside that element I would put another with display set to table cell and vertical align: middle. then you would have an image that could be any height, and a body of text overlaying that again can be any height (so long as it's less than the images height) and it would be vertically centered over the image.

That is my assumption but I could be entirely wrong. I suggest you read further into the CSS box model. Understanding this is vital for doing layouts.

@@rbrtsmith - you're like Sherlock Holmes of front end aren't you? I mean how did you deduce all that detail? I know your reply stated that it corresponds to what you would do if given those constraints, but man, that it nice.

Thanks for the warm comment. I try my best. I guess it helps that I do front-end coding pretty much every day, and have a good collection of go-to resources, follow and read what the best front-end devs in the industry are writing about.

 

If you are on Twitter these guys are worth following, they are some of the best developers in the industry:

 

Harry Roberts @csswizardry

Nicholas Gallagher @necolas

Douglas Crockford

Nicole Sullivan @stubbornella

Paul Irish @paul_irish

David Walsh davidwalshblog

My Main go to resources are

CodeSchool http://www.codeschool.com/

Frontend Masters http://frontendmasters.com/

CSS-TRICKS http://css-tricks.com/

CSS Wizardry http://csswizardry.com/

Hugo Giraudel http://hugogiraudel.com/

Treehouse http://teamtreehouse.com/ is where I first learnt from, it's probably the best resource out there for beginners.