How do I suppress spacing between paragraphs of the same CSS class?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP

How do I suppress spacing between paragraphs of the same CSS class?



What I'd like to do is make something like ...


<p class="A">Line of class A</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="C">Line of class C</p>
<p class="C">Line of class C</p>
<p class="D">Line of class D</p>



... turn out like:



I've messed around with margins and line-height and container divs but no combination has worked for me so far. Is this possible?




3 Answers
3



You could use javascript's getElementsByClassName() method for each class and then loop through the elements until you reach the final element of each class and then add a bottom margin to it.



An easier solution that doesn't require javascript would be to make a class that adds space after the element that it's applied to and then add that class to the final element of each class. Something like this:




.add-space
margin-bottom: 40px;


<p class="A add-space">Line of class A</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B add-space">Line of class B</p>
<p class="C">Line of class C</p>
<p class="C add-space">Line of class C</p>
<p class="D add-space">Line of class D</p>



You are looking for a nth child selector based on a class. This is not possible with CSS3.



I recomend you this reading to understand the problem you're facing: https://medium.com/@MateMarschalko/css-select-nth-element-with-class-a313d080e2bf



But I think you should make it simple, you can wrap your <p> tags in a <div> tag and use it like this:


<p>


<div>




p
margin: 0;
padding: 0;


div.a p:last-of-type,
div.b p:last-of-type,
div.c p:last-of-type,
div.d p:last-of-type
margin-bottom: 15px;


/* Or just div margin-bottom: 15px; */


<div class="a">
<p>Line of class A</p>
</div>
<div class="b">
<p>Line of class B</p>
<p>Line of class B</p>
<p>Line of class B</p>
</div>
<div class="c">
<p>Line of class C</p>
<p>Line of class C</p>
</div>
<div class="d">
<p>Line of class D</p>
</div>



You can try wrapping the elements that share the same class then add margins to the wrappers.




p
margin: 0;

.add-space
padding-bottom: 20px;


<div class="add-space">
<p class="A">Line of class A</p>
</div>
<div class="add-space">
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
</div>
<div class="add-space">
<p class="C">Line of class C</p>
<p class="C">Line of class C</p>
</div>
<div class="add-space">
<p class="D">Line of class D</p>
</div>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

Executable numpy error

Image
Clash Royale CLAN TAG #URR8PPP Executable numpy error I'm trying to create an executable file for my code. I've already tried with cx_Freeze and with pyinstaller. Both gives me the same error, which is: "Missing required dependencies 0.format(missing_dependencies))" PS C:UsersGustavoDesktopbuildexe.win32-3.6> python AgendaOficial.py C:UsersGustavoAppDataLocalProgramsPythonPython36-32python.exe: can't open file 'AgendaOficial.py': [Errno 2] No such file or directory PS C:UsersGustavoDesktopbuildexe.win32-3.6> .AgendaOficial.exe Traceback (most recent call last): File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_Freezeinitscripts__startup__.py", line 14, in run module.run() File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_FreezeinitscriptsConsole.py", line 26, in run exec(code, m. dict ) File "AgendaOficial.py", line 8, in File "C:UsersGustavoAppDataLocal
Read more

PySpark count values by condition

Image
Clash Royale CLAN TAG #URR8PPP PySpark count values by condition I have a DataFrame, a snippet here: [['u1', 1], ['u2', 0]] basically one string ('f') and either a 1 or a 0 for second element ('is_fav'). What I need to do is grouping on the first field and counting the occurrences of 1s and 0s. I was hoping to do something like num_fav = count((col("is_fav") == 1)).alias("num_fav") num_nonfav = count((col("is_fav") == 0)).alias("num_nonfav") df.groupBy("f").agg(num_fav, num_nonfav) It does not work properly, I get in both cases the same result which amounts to the count for the items in the group, so the filter (whether it is a 1 or a 0) seems to be ignored. Does this depend on how count works? count 1 Answer 1 There is no filter here. Both col("is_fav") == 1 and col("is_fav") == 0) are just boolean expressions and count doesn't really care about their value as long a
Read more

Trying to Print Gridster Items to PDF without overlapping contents

Image
Clash Royale CLAN TAG #URR8PPP Trying to Print Gridster Items to PDF without overlapping contents I want to print gridster items to pdf using chome browser. Unfortunately the item overlaps on next page. Is there any way to make gridster item go to next page if it doesnt fit in the current page when printing to pdf? Screenshot By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Read more