Vertical List CSS Module

Developer
Myron Schippers
Size
2,655 Kb
Views
40,480
  1. Vertical List CSS Module Previews
  2. Vertical List CSS Module HTML Codes
  3. Vertical List CSS Module CSS Codes

How do I make an vertical list css module?

A style module that targets direct decedents of a wrapping element and provides vertical spacing between those items but leaves no trailing space at the end of the list.. What is a vertical list css module? How do you make a vertical list css module? This script and codes were developed by Myron Schippers on 15 September 2022, Thursday.

Vertical List CSS Module Previews
IQ Test

Vertical List CSS Module - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical List CSS Module</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h4 class="hdg"> .vList (mod _spaceXTight)<br /> <span class="content content_spaceXTight">Vertical Space: </span>
</h4>
<ul class="vList vList_spaceXTight"> <li>Listed content</li> <li>Listed content</li> <li>Listed content</li>
</ul>
<h4 class="hdg"> .vList (mod _spaceTight)<br /> <span class="content content_spaceTight">Vertical Space: </span>
</h4>
<ul class="vList vList_spaceTight"> <li>Listed content</li> <li>Listed content</li> <li>Listed content</li>
</ul>
<h4 class="hdg"> .vList (mod none)<br /> <span class="content content_spaceReg">Vertical Space: </span>
</h4>
<ul class="vList"> <li>Listed content</li> <li>Listed content</li> <li>Listed content</li>
</ul>
<h4 class="hdg"> .vList (mod _spaceComfy)<br /> <span class="content content_spaceComfy">Vertical Space: </span>
</h4>
<ul class="vList vList_spaceComfy"> <li>Listed content</li> <li>Listed content</li> <li>Listed content</li>
</ul>
<h4 class="hdg"> .vList (mod _spaceLoose)<br /> <span class="content content_spaceLoose">Vertical Space: </span>
</h4>
<ul class="vList vList_spaceLoose"> <li>Listed content</li> <li>Listed content</li> <li>Listed content</li>
</ul>
<h4 class="hdg"> .vList (mod _spaceChasm)<br /> <span class="content content_spaceChasm">Vertical Space: </span>
</h4>
<ul class="vList vList_spaceChasm"> <li>Listed content</li> <li>Listed content</li> <li>Listed content</li>
</ul>
</body>
</html>

Vertical List CSS Module - Script Codes CSS Codes

.vList { margin: 0; padding: 0;
}
.vList > * { display: block; margin: 0; padding: 0; list-style: none;
}
/*
SPACING
----------
*/
.vList > * + * { /* default to comfy */ padding-top: 30px;
}
.vList_spaceXTight > * + * { padding-top: 8px;
}
.vList_spaceTight > * + * { padding-top: 15px;
}
.vList_spaceComfy > * + * { padding-top: 38px;
}
.vList_spaceLoose > * + * { padding-top: 45px;
}
.vList_spaceChasm > * + * { padding-top: 60px;
}
body { font-family: Helvetica, Arial, sans-serif;
}
.content { display: block; font-size: 1em; font-size: 1rem; line-height: 1.875;
}
.content::after { content: "N/A"; display: inline-block;
}
.content_spaceXTight::after { content: "8px";
}
.content_spaceTight::after { content: "15px";
}
.content_spaceReg::after { content: "30px";
}
.content_spaceComfy::after { content: "38px";
}
.content_spaceLoose::after { content: "45px";
}
.content_spaceChasm::after { content: "60px";
}
/* .hdg for display only */
.hdg { margin: 0 0 15px; padding: 6px; background: lightgreen; font-size: 1.125em; font-size: 1.125rem; line-height: 1.38889;
}
Vertical List CSS Module - Script Codes
Vertical List CSS Module - Script Codes
Home Page Home
Developer Myron Schippers
Username chbymnky
Uploaded September 15, 2022
Rating 3
Size 2,655 Kb
Views 40,480
Do you need developer help for Vertical List CSS Module?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Myron Schippers (chbymnky) Script Codes
Name
Bicycle
Sliding with CSS
Breadcrumb Challenge v2
JQuery UI Tab Face Lift
Parallax Ribbon
Loading Dots
Buttons with style
Collapsible plugin
Custom Form Fields
Breadcrumb Challenge v1
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!