Help with adding a break or space between a lsit?

HTML-CSS
1

My GF does some cam modeling and I’m trying to help setup her profile with a free template that’s offered, but I’m editing and need to add a space between two “tables”

Problem is I don’t understand how all of this new HTML works since I haven’t done anything for years, and used to using a WYSIWYG editor.
Below is the entire code.

I’ve inserted a comment where I’m trying to make a space…

<!-- THERE NEEDS TO BE A SPACE OF SOME KIND HERE, AS THE TWO "TABLES" ABOVE AND BELOW HAVE NO SPACE BETWEEN THEM !--> 	


																																										<p style="background:rgb(78, 95, 138);background:linear-gradient(90deg, rgb(65, 79, 119) 0%, rgb(92, 123, 151) 100%);color:#fff;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;text-align:center;border-radius:30px 30px 0 0px;">
																																											<i style="display:block;padding:10px 0px;font-style:normal;"> Comand</i>
																																										</p>
																																									</li>
																																									<li style="list-style:none;width:100%;display:inline-flex;">
																																										<p style="background:rgb(78, 95, 138);background:linear-gradient(90deg, rgb(65, 79, 119) 0%, rgb(92, 123, 151) 100%);color:#fff;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;border-radius:40px 0 0 40px;">
																																											<i style="display:block;padding:10px 0px;font-style:normal;"> Random</i>
																																										</p>
																																										<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																											<i style="display:block;padding:10px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 98 tks</i>
																																										</p>
																																										<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																											<i style="display:block;padding:8px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 3-7 sec <img src="Profile/trans.png" style="width:50px;height:20px;background:url(Profile/36-sprite1.png) 0 -1040px;float:none;margin:0px 0 0 0px;"></i>
																																											</p>
																																										</li>
																																										<li style="list-style:none;width:100%;display:inline-flex;">
																																											<p style="background:rgb(78, 95, 138);background:linear-gradient(90deg, rgb(65, 79, 119) 0%, rgb(92, 123, 151) 100%);color:#fff;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;border-radius:40px 0 0 40px;">
																																												<i style="display:block;padding:10px 0px;font-style:normal;"> Wave</i>
																																											</p>
																																											<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																												<i style="display:block;padding:10px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 99 tks</i>
																																											</p>
																																											<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																												<i style="display:block;padding:8px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 10 sec <img src="Profile/trans.png" style="width:50px;height:20px;background:url(Profile/36-sprite1.png) 0 -955px;float:none;margin:0px 0 0 0px;"></i>
																																												</p>
																																											</li>
																																											<li style="list-style:none;width:100%;display:inline-flex;">
																																												<p style="background:rgb(78, 95, 138);background:linear-gradient(90deg, rgb(65, 79, 119) 0%, rgb(92, 123, 151) 100%);color:#fff;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;border-radius:40px 0 0 40px;">
																																													<i style="display:block;padding:10px 0px;font-style:normal;"> Earthquake</i>
																																												</p>
																																												<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																													<i style="display:block;padding:10px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 120 tks</i>
																																												</p>
																																												<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																													<i style="display:block;padding:8px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 12 sec <img src="Profile/trans.png" style="width:50px;height:20px;background:url(Profile/36-sprite1.png) 0 -975px;float:none;margin:0px 0 0 0px;"></i>
																																													</p>
																																												</li>
																																												<li style="list-style:none;width:100%;display:inline-flex;">
																																													<p style="background:rgb(78, 95, 138);background:linear-gradient(90deg, rgb(65, 79, 119) 0%, rgb(92, 123, 151) 100%);color:#fff;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;border-radius:40px 0 0 40px;">
																																														<i style="display:block;padding:10px 0px;font-style:normal;"> Fireworks</i>
																																													</p>
																																													<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																														<i style="display:block;padding:10px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 121 tks</i>
																																													</p>
																																													<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																														<i style="display:block;padding:8px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 15 sec <img src="Profile/trans.png" style="width:50px;height:20px;background:url(Profile/36-sprite1.png) 0 -1016px;float:none;margin:0px 0 0 0px;"></i>
																																														</p>
																																													</li>
																																													<li style="list-style:none;width:100%;display:inline-flex;">
																																														<p style="background:rgb(78, 95, 138);background:linear-gradient(90deg, rgb(65, 79, 119) 0%, rgb(92, 123, 151) 100%);color:#fff;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;border-radius:40px 0 0 40px;">
																																															<i style="display:block;padding:10px 0px;font-style:normal;"> Pulse</i>
																																														</p>
																																														<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																															<i style="display:block;padding:10px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 555 tks</i>
																																														</p>
																																														<p style="background-color:#e6d5a4;color:#000;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;">
																																															<i style="display:block;padding:8px 0px;font-style:normal;text-shadow:1px 1px 5px #fff;"> 123 sec <img src="Profile/trans.png" style="width:50px;height:20px;background:url(Profile/36-sprite1.png) 0 -992px;float:none;margin:0px 0 0 0px;"></i>
																																															</p>
<br/>																																														</li>
																																													</ul>

<li style="list-style:none;width:100%;display:inline-flex;">
																																														<p style="width:100%;margin:1px;height:40px;"/>
<!-- THERE NEEDS TO BE A SPACE OF SOME KIND HERE, AS THE TWO "TABLES" ABOVE AND BELOW HAVE NO SPACE BETWEEN THEM !--> 																																													<p style="background:rgb(78, 95, 138);background:linear-gradient(90deg, rgb(65, 79, 119) 0%, rgb(92, 123, 151) 100%);color:#fff;font-size:18px;font-weight:bold;width:100%;margin:1px;height:40px;text-align:center;border-radius:30px 30px 0 0px;">
2

I don’t know why we need to know half the information you have provided. Can you not just say you are helping without the unnecessary details?

I’d suggest you edit your title and post as it isn’t very suitable for this site.

We really have no way of knowing what the layout looks like based on the code you have posted. I’m also not sure which elements it is you are trying to create space between?

3

I was trying to keep links from any adult images showing up or linking to any adult website inadvertently.

I think I can post it now though, I changed the links to be local so no images should be pulled.

4

The br element is meant for line breaks in text, it isn’t meant as margin between elements.

The element before the space is needed can use a margin-bottom and the element after the wanted space can use a margin-top.

So if you want more space between two li elements you just add the appropriate margin to them.

<ul>
  <li>1</li>
  <li style="margin-bottom: 20px">2</li>
  <li>3</li>
</ul>
5

Thank you, that sorted me out. just needed to add that margin tag.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.