Cannot remove padding from div

Question

I have a <s:actionmessage /> that displays a message upon successful execution of an action.

success.jsp:

<s:if test="hasActionMessages()">
    <div class="messages justify">
        <s:actionmessage />
    </div>
</s:if>

CSS:

.messages {
    background-color: #80FF80;
    border: 1px solid #000000;
    width: 600px;
    color: #000000;
    padding: 0;
    margin: 0;
}

.messages li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.justify {
    text-align: justify;
}

Output:

enter image description here

By default, it appears <s:actionmessage />, displays a <li>, so I have modified the CSS to remove its default style.

But, there is still an uneven padding on the left of the div, even with setting to
padding: 0; margin: 0;.

How to make both sides even?

EDIT: (Inspect Element)

<div class="messages justify">
    <ul class="actionMessage">
        <li>
            <span>
                You have successfully changed your password. This is just to make the message long, so it will have to go to the second line of the div.
            </span>
        </li>
    </ul>
</div>

_displays a li_ means it has a parent `ul` or directly `.messages` — Vitorino fernandes, Jan 10 '15 at 11:17
I have added the inspect element into the post. I also modified the CSS by adding `.messages ul {padding: 0; margin: 0;}` and `.messages span {padding: 0; margin: 0;}`, but still the same. — k_rollo, Jan 10 '15 at 11:29
`.actionMessage{padding:0;}` if not try with important `.actionMessage{padding:0 !important;}` — Vitorino fernandes, Jan 10 '15 at 11:37
You can look at which element in the DOM has a padding and which CSS rule is applied. Then use CSS selector to override the rule. — Roman C, Jan 10 '15 at 11:46

score 2 · Accepted Answer · edited May 23 '17 at 12:07

That is due to the default padding-left applied by browsers to the <ul> element.

There are many elements with default values, and they may vary between different browsers (and they do), for this reason you should load as first in the page, a CSS Reset, that is a special stylesheet used to erase any browser-specific default setting and ensure that the CSS rules that you will write will be rendered in the same way in every browser.

Take a look at this old but still good List of CSS Reset.

By the way, @VitorinoFernandes solution is right (while the other is not, because it's applying the padding to the <li>, not to the <ul>), and this is a running example:

.messages {
    background-color: #80FF80;
    border: 1px solid #000000;
    width: 600px;
    color: #000000;
    padding: 0;
    margin: 0;
}

.messages li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.justify {
    text-align: justify;
}

.nopadding{
   padding-left: 0px;
}

<div class="messages justify">
    <ul class="actionMessage">
        <li>
            <span>
                You have successfully changed your password. This is just to make the message long, so it will have to go to the second line of the div.
            </span>
        </li>
    </ul>
</div>

<div class="messages justify">
    <ul class="actionMessage nopadding">
        <li>
            <span>
                You have successfully changed your password. This is just to make the message long, so it will have to go to the second line of the div.
            </span>
        </li>
    </ul>
</div>

Then you have a different HTML from the one shown, or you have a typo in CSS rules, or you have other CSS rules loaded after the above one that are overriding the setting (but it would be strange, this is 99.9% the default padding, so... I bet on the typo).

Thank you for the explanation and the CSS reset, I was unaware of such. :) — k_rollo, Jan 16 '15 at 06:11

score 1 · Answer 2 · answered Jan 10 '15 at 11:39

1

Most of the browsers gives default padding for ul/ol

Try with this

.messages .actionMessage{
  padding:0;
}

if not try with !important

.messages .actionMessage{
  padding:0 !important;
}

answered Jan 10 '15 at 11:39

Vitorino fernandes

15,794
3
20
39

Hi, I have tried both of the above. No changes. How mysterious this is haha. – k_rollo Jan 10 '15 at 11:43
2

that is too much mysterious buddy – Vitorino fernandes Jan 10 '15 at 11:46

score 1 · Answer 3 · answered Jan 10 '15 at 12:21

I just added padding-right to even it out:

.messages {
    background-color: #80FF80;
    border: 1px solid #000000;
    width: 600px;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
}

.messages li {
    list-style: none;
    padding-right: 40px;
}

Doesn't look so bad.

enter image description here

score 0 · Answer 4 · answered Jan 10 '15 at 11:31

0

Just add !important in your CSS .message li as

 .message li{
  padding: 0px !important;
  margin: 0px !important;}

answered Jan 10 '15 at 11:31

Ankit

1,075
1
8
19

__!important__ is never the answer. – Thomas Bormans Jan 10 '15 at 11:32
Hi, no changes occurred. – k_rollo Jan 10 '15 at 11:34

Cannot remove padding from div

4 Answers4