UL Padding Issue with CSS

[GrumpyYoungMan]

Strange Issue:

Code: [Select]

ul { padding: 0; }

/* PAGINATION CSS */
.pagination ul {

list-style-position: inside;
list-style-type: none;
margin: 0;
padding: 0;
   
}

.pagination li {

display: inline;

}

.pagination li a, .pagination li span {

text-decoration: none;
color: inherit;
padding: 0.5em 0.25em;
border: 1px solid black;
margin: 0.25em;

}

.pagination li a:hover, .pagination li a:focus {

background: #DEF;

}

.pagination li span {

background:orange;

}

.pagination li:first-child a {

border-radius:0.75em 0 0 0.75em;

}

.pagination li:last-child a {

border-radius:0 0.75em 0.75em 0;

}
Why is the default UL style over ruling the padding from the .pagination UL css style?

[coothead]

Hi there GrumpyYoungMan

if you are referring to the padding here...

Code: [Select]

.pagination li a, .pagination li span {
...
...
padding: 0.5em 0.25em;
...
...
 }
..then you must understand that inline-elements cannot receive padding values.   

coothead

[GrumpyYoungMan]

Thanks CootHead that makes sense, but if you click here I refer to the padding on the left before the "HTML" in the horizontal list

[GrumpyYoungMan]

Also what would be the best way to add padding that? Please? Sorry for all the questions...

[coothead]

Hi there GrumpyYoungMan,

• the ul/ol elements have default padding-left values.
• set the inline elements to display: block or to
  display: inline-block, depending upon your requirements.

coothead

[Jason Knight]

1) depending on BROWSER UL OR LI can have a default padding OR margin. Remember what things look like is none of HTML's flipping busines, so before CSS was a thing and in the early days of CSS it was up to the UA vendor (like browser makers) to determine how to apply that.

It's why we use resets.

2) since you set zero on both UL declarations, what difference are you even referring to. That said the leading class should override the global classless.

3) Don't try to inline-block or pad LI. Set inline-block or block on the ANCHOR instead and either pad or margin that.

Trying to style display:inline or inline-block LI can have strange behaviors in IE, Edge, and even Firefox due to legacy "compatibility" issues, compared to webkit and blink browsers (chrome-likes and Safari) which prefer to more strictly follow the specification.

if list-style-type is none, there's no reason to declare list-style-position. In either case you'd be better off just using the short-hand list-style instead.

And again, if you were using a reset you wouldn't need to be dicking around with any of those explicit zero margin/padding late-game like that.

These days I always start my screen media stylesheet with:

Code: [Select]

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
margin:0;
padding:0;
}

img, fieldset {
border:none;
}

* {
box-sizing:border-box;
}

hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}

@media (max-width:480px) {
/* Fix for pre "viewport <meta>" mobile browsers */
* {
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}

html, body {
height:100%;
}

As it sets up the fastest and easiest environment to work in.

Under that your could could simply be:

Code: [Select]

.pagination ul {
list-style:none;
}

.pagination li {
display:inline;
}

.pagination li a,
.pagination li span {
display:inline-block;
padding:0.5em 0.25em;
margin:0.25em;
text-decoration:none;
color:inherit;
border:1px solid black;
}

.pagination li a:focus,
.pagination li a:hover {
background:#DEF;
}

.pagination li span {
background:orange;
}

.pagination li:first-child a {
border-radius:0.75em 0 0 0.75em;
}

.pagination li:last-child a {
border-radius:0 0.75em 0.75em 0;
}
Side note, lose the comment for nothing. REALLY? .pagination handles the page pagination? Whooddathunkit!?! That's part of the whole reason to say what things ARE and not what you want them to look like with your tags, classes, and ID's, so you don't need pointless redundant comments.