Great article! Can you explain the 'logic' of the browser (rendering engine) for why the parent needs to have a margin or padding in order to prevent overflow of the child components? I would expect that they should be contained in the parent by default. Why would it be allowed to 'step outside' of the parent? Is there a use-case for that?
Fortunately, this behaviour, related to collapsing margins, isn't random and it falls under the concept of Block Formatting Context. Always try to find the proper terminology so you can research the concepts better. Here's a good article about BFC: smashingmagazine.com/2017/12/under...
Great article! Can you explain the 'logic' of the browser (rendering engine) for why the parent needs to have a margin or padding in order to prevent overflow of the child components? I would expect that they should be contained in the parent by default. Why would it be allowed to 'step outside' of the parent? Is there a use-case for that?
I'm not sure but I remember that was done because people used HTML and CSS for text. So these styles were created for correct displaying of text
So, would you recommend to make a habit of placing some margin/padding in the parent to prevent overflow etc?
Please, a demo for demonstration what you want to make and email on melnik909@ya.ru. I'll check it
Fortunately, this behaviour, related to collapsing margins, isn't random and it falls under the concept of Block Formatting Context. Always try to find the proper terminology so you can research the concepts better. Here's a good article about BFC: smashingmagazine.com/2017/12/under...
An amazing link, would never have found it otherwise.