Collapsing margins are simply he way that css works so you have to accommodate them into your design in some manner.
There are other methods of un-collapsing margins other than using padding and you could use overflow:hidden on the container assuming you don;t need visible overflow or you could float the container and the margin wouldn’t collapse (or use inline-block or any other element that creates a new block formatting context.)
The easiest method is simply to have a 1px top and bottom padding on the container and all margins will be contained within.
Are you talking HTML 5 ?
I never talk html5 
I’m talking real html and you should always use the appropriate element for the task in hand and which for headings should be the correct heading tag in a logical progression.
How can we tell that padding, border and width and margins fit the 100% space ?
If you mean how can you make sure that padding margins, border and width fit then you have to be careful how you apply them. Ignoring margins for the time being you could apply the width to an outer element and then add border and padding to the inner element and not affect the overall width.
If you are mixing em, px and percent with padding, borers amd margins on the same element then it becomes very difficult to make it fit exactly.
Ok. Despite your explanation you disapprove this option, regarding that:
so, you conclude:
Ok. But if we look into News Block A and News Block B, we will notice that the text height is different.
And the point was to, regardless the text height the “More Details” on News Block A and News Block B should be equally vertical aligned.
But of course, the user that has a font-size bigger, should also benefit from this.
Regarding this, how can I let it follow the content and, at the same time, have them visually v-aligned ?
This is another case of letting a design dictate the content when it should be the other way around. Although it may be visually pleasing to line things up exactly, it’s just not natural for this to happen on a fluid webpage. The moment you force elements into positions they don’t naturally occupy the more you open yourself to something breaking at a later stage. The main purpose of web page is to provide information and if a visual aspect harms that intent then you need to think seriously whether its a good idea.
Notwithstanding the method I outlined with absolute positioning is about the only way you can do it and will probably stand up quite well if you use em measurement for the protected space (assuming the text in the protected space is at the same font-size as the parent container so that they grow uniformly).
I will the only reason the other height was there, was only to provide us, a look and feel for what we want to accomplish.
So, with min-height we will gain two things:
- It will have the same height initially;
- It will grow regarding the user font preferences;
It’s just still not perfect because we will need:
3) It should keep the same equal height AFTER the resize;
In order to accomplish 3) we may:
Not yet unfortunately.
I will leave this for is own post.
CSS doesn’t naturally do equal columns (apart form display:table) and why should it? This is another designers choice rather than a content choice and as far as web pages are concerned content is king.
However, there are hacks such as faux columns, and absolute overlays but I’ll leave you to research those 