Is there a standard on what is the better way to space out a Headline, body text, and button link?
Using a margin-bottom on the headline and body?
Or using a margin-top on the body and CTA button?
Add a comment
|
1 Answer
Welcome!
As for your question, the first option is the one I would go with. This is due to the fact that it's the way the Bootstrap library does it and it works rather well. If you view the Bootstrap homepage, and inspect the code with the F12 Developer Tools, you can see the box model highlighted on each element. Looking at the properties of the elements, and using the "computed" tab, you can see the bottom margins defined on each of the different types of page elements.
To see this in action, go to the Bootstrap Home Page ( https://getbootstrap.com/ ). Right click on the big purple "Bootstrap" word and pull down to "Inspect". The F12 Tools will pop up, with the line of responsible HTML highlighted in the left pane. Also, If you also place your mouse over that highlighted line of code, the displayed element on the webpage will be highlighted with box model color shading. In this case it would be blue shading for the characters, and yellowish for the bottom-margin. To see the style properties that are being applied, switch the right F12 panel to computed, and then expand the "bottom-margin" property. It will show you the applicable styles, which ones are being ignored, and which one is applied.
F12 Tools rock for working your CSS.
Craig
