Cannot Apply or Remove Padding

ds_tx · July 14, 2022

I have DIVs with virtually the same CSS. In one instance, padding is being added and cannot be removed. In other instance(s), padding cannot be added.
See - http://dstall.com/Test/ Enlarge browser as needed to see that padding is being added to top and bottom of DIVs "One" and "Two", and will not apply to DIV "Five" (or any of the other numbered DIVs). See HTML and CSS below -

<head>
  <link rel="stylesheet" href="Test.css">
</head>

<div id="welcome" class="home">
  Welcome
</div>

<div id="box">
<div class="col left1">
	<div id="box" class="title title1">One</div>
		Text
</div> 
<div class="col right2">
	<div id="box" class="title title2">Two</div>
		Text
</div>
</div>

<div id="box">
<div class="col left3">
	<div id="box" class="title title3 pad">Three</div>
		Text 
</div> 
<div class="col center4">
	<div id="box" class="title title4">Four</div>
		Text
</div> 
<div class="col right5">
	<div id="box" class="title title5">Five</div>
		Text
</div> 
</div>
<div id="box">
<div class="col left6">
	<div id="box" class="title title6">Six</div>
		Text
</div>
</div>

#welcome {
    background-image: url("https://dstall.com/MOD/images/1/1f/Background.jpg"); 
    background-repeat: repeat-x repeat-y;
    background-position: center;
    padding: 0 !important; 
    margin: 0 0 5px 0; 
    text-align: center;
    font-size: 1.2em; }

#box { display: flex; width: 100%; margin-bottom: 5px; }

.col { text-align: left; padding: 10px; }

.left1 { width: 76%; background-color: #f5fafe !important; margin-right: 5px; border: 1px solid #cedff1 !important; } /* Wikiblue1 */
.right2 { width: 24%; background-color: #f4fff9 !important; border: 1px solid #cdf2e0 !important; } /* Wikigreen1 */

.left3 { font-size: 0.9em; line-height: 120%; width: 33%; background-color: #FFFFF0 !important; margin-right: 2.5px; border: 1px solid #FFE4C4 !important; } /* Ivory  */
.center4 { font-size: 0.9em; line-height: 120%; width: 33%; background-color: #FFFFE0 !important; margin-left: 2.5px; margin-right: 2.5px; border: 1px solid #EEE8AA !important; } /* LightYellow */
.right5 { font-size: 0.9em; line-height: 120%; width: 33%; background-color: #FFFAF0 !important; margin-left: 2.5px; border: 1px solid #FFDAB9 !important; } /* FloralWhite */

.left6 { font-size: 0.9em; line-height: 120%; width: 100%; background-color: #FFF5EE !important; } /* SeaShell */

.title { 
   display: block; 
   font-size: 14pt;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box; }

.title1 { background-color: #cedff1 !important; border: none; padding: 2px 0 3px 0 !important; } /* Wikiblue2 */
.title2 { background-color: #cdf2e0 !important; border: none; padding: 2px 0 3px 0 !important; } /* Wikigreen2 */
.title3 { background-color: #ffe4c4 !important; border: none; padding: 2px 0 3px 0 !important; } /* Bisque */
.title4 { background-color: #eee8aa !important; border: none; padding: 2px 0 3px 0 !important; } /* PaleGoldenRod */
.title5 { background-color: #ffdab9 !important; border: none; padding: 20px 0 30px 0 !important; } /* PeachPuff */
.title6 { background-color: #eee8aa !important; border: none; padding: 2px 0 3px 0 !important; } /* LavendarBlush */

Edited July 14, 2022 by ds_tx

dsonesuk · July 14, 2022

A id #reference should be unique and only used once within a page and when using flex-box usually to the parent container. Only classes can be used multiple times within the page.

ds_tx · July 15, 2022

I changed id #box to class .box, and that fixed padding on DIVs 3, 4, 5 and 6. There's 0 padding on all of them now, except 5 which has 10px top and bottom.
But there's still padding being added top and bottom to DIVs 1 and 2, even though CSS has padding set at 0, and HTML for all DIVs is essentially the same as shown in code above.

See - http://dstall.com/Test/

dsonesuk · July 15, 2022

Try using valid html5 layout, with doctype, html, body and then adjust line-height or remove it! To see if that makes a difference.

ds_tx · July 15, 2022

Thanks. line-height: normal didn't work, but line-height: 100% did

Sign In

Cannot Apply or Remove Padding

Recommended Posts

ds_tx

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

ds_tx

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

ds_tx

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity