Added support for margin and padding in text spans.

This commit is contained in:
Martín Lucas Golini
2026-04-27 23:58:13 -03:00
parent ab712cd5c8
commit bbd91d2399
9 changed files with 329 additions and 65 deletions

View File

@@ -0,0 +1,65 @@
<!doctype html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1e2a38;
font:
13px Verdana,
Sans-Serif;
color: #d0d8e0;
line-height: 1.5;
}
a {
color: #60c0e0;
text-decoration: underline;
}
a:hover {
background-color: #2a3a4a;
color: #80d8f0;
}
nav {
background-color: #162028;
text-align: center;
padding: 8px;
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid #2a3a4a;
}
nav a {
margin: 0 10px;
font:
bold 11px Verdana,
Sans-Serif;
text-decoration: none;
color: #80b8d0;
}
nav a:hover {
background-color: #2a3a4a;
color: #a0d8f0;
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#features">Features</a>
<a href="#super-enhancement">Super Enhancement</a>
<a href="#downloads">Downloads</a>
<a href="#coming">Coming Soon</a>
<a href="#legal">Legal</a>
</nav>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1e2a38;
font:
16px Verdana,
Sans-Serif;
color: #d0d8e0;
line-height: 1.5;
padding: 20px;
}
.padded-span {
background-color: #c06060;
color: #ffffff;
padding: 10px 20px;
margin: 0 5px;
}
.large-padding {
background-color: #60c060;
color: #ffffff;
padding: 30px;
margin: 0 10px;
}
.mixed-padding {
background-color: #6060c0;
color: #ffffff;
padding-left: 50px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div>
This is normal text with a <span class="padded-span">padded span</span> inside it.
</div>
<div style="margin-top: 40px;">
Here is a <span class="large-padding">large padded span</span> which should increase the line height and spacing.
</div>
<div style="margin-top: 40px;">
Finally, a <span class="mixed-padding">mixed padding span</span> to test asymmetrical padding values.
</div>
</body>
</html>