0

I wanted to know if there were a best practice for styling any element that in turn could be placed anywhere in a page and retain its margin. For example: An <h1> tag with a ruleset of margin-bottom: 2rem; and a <p> tag with a ruleset of margin-top: 2rem. Now these elements can be used anywhere within a webpage. But we the <h1> is placed before the <p> tag we will be encountered with a spacing of 4rem, now the behavior that I'd like to have is to maintain the space of one or the other. As a reminder this is a small example, a web page may contain all sorts of html elements as well as buttons and other components. To create a ruleset for each instance and combination is super time consuming and cumbersome, is there a better way?

Diego
  • 594
  • 2
  • 10
  • 29
  • If you have the time, this [presentation](https://www.youtube.com/watch?v=0NDyopLKE1w) by Nicole Sullivan exemplifies the process of creating a library of web components, which is kind of what you're asking here. – araraonline Jun 14 '19 at 03:59
  • That was a great talk. Thanks for sharing – Diego Jun 14 '19 at 05:48

2 Answers2

2

if you know margin collepsing so its help you understand that margin remaining between <h1> and p is only 2rem not 4rem and here a stackoverflow answerlink for your question... hope you got help form this

Harshad Prajapati
  • 235
  • 1
  • 12
  • thank you for sharing those links. Kind of made me go in a rabbit hole of good resources. ✌ – Diego Jun 14 '19 at 05:50
0

Most elements (such as <h1> and <p>) have in-built default vertical margins. These are the 'generally accepted' guidelines, and you shouldn't explicitly need to overwrite them. You can, however, and if you want to set your own 'generic' margins that can be used anywhere, the best approach would be to use classes. For example:

.margin-top {
  margin-top: 15px;
}

Any element with this class (such as <h1 class="margin-top">) will have this rule overwrite their default. Naturally, you could apply the rule to h1 directly,

Yes, you will encounter situations where you have both a top and bottom margin sitting next to one another, but you will need to work out when this sort of behaviour is acceptable, and when it is not. One way to avoid this is to make use of adjacent sibling combinators:

h1 + p {
  margin-bottom: 0;
}

Because the above rule has more specificity than the generic h1 selector, it will take priority.

Yes, it will be a pain to work out all of the possible combinations that you may encounter, and you will have to write rules for each scenario. But you can make use of the class-driven approach above in combination with adjacent sibling combinators to significantly help eliminate this problem:

.margin-top {
  margin-top: 15px;
}

.margin-bottom + .margin-top {
  margin-top: 0;
}

This will completely prevent any element with the class margin-top from applying its margin only if it follows a class with margin-bottom set.

Note that many other approaches exist to already, and one such approach makes use of a Lego analogy to suggest simply making use of a padding on each element that is equal to half of the gutter:

$gutter: 20px;
.element {
  padding: $gutter / 2;
}

Which is illustrated in a complete proof-of-concept code example here.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • i appreciate the time and effort you put into providing a couple of options. Im in a process of refactoring my code and have to think about these points more closely. Perhaps play with them a bit and see what fits and makes sense to carry on. – Diego Jun 14 '19 at 05:53