CSS Mystery: Width Being Set to 0Px Without Any CSS Rules

CSS mystery: Width being set to 0px without any CSS rules?

the link uses display: inline;. You want either display: inline-block; or display: block; (if you need IE6-7 support).

You may want to read the spec on the display property.

BorderWidth set to 2px but not showed on page

Seems like you missed to set borderStyle.

You can set the border style with Material-UI theme like the following.

const useStyles = makeStyles((theme) => ({
  search: {
    border: `2px solid ${theme.palette.primary.main}`
  }
});

Mysterious CSS vertical space

Your .hint div has a 1em top margin to "push" it down below the line of text, however in your second instance your .popup div doesn't contain anything (as absolutely positioned elements take up no space). An inline-block div with no content has no height or width and sits on the baseline of a line of text. So, you are "pushing" off the bottom rather than the top of the line, and hence the additional 1em vertical space. I don't really understand why you're using inline-block, inline would work just as well given the content of the div is absolutely positioned.

In response to your question edits: Using display inline as I suggested should work, but you need to set the left and top values of your absolutely positioned .hint div to zero. Also, you'll need to remove your <div> </div> element otherwise you'll end up with a line break where it occurs (because it's not inline).

Setting a width and height on an A tag

You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.

Why is there an unexplainable gap between these inline-block div elements?

In this instance, your div elements have been changed from block level elements to inline elements. A typical characteristic of inline elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)

There are a few solutions that can be used to solve this.

Method 1 - Remove the whitespace from the markup

Example 1 - Comment the whitespace out: (example)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Example 2 - Remove the line breaks: (example)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Example 3 - Close part of the tag on the next line (example)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Example 4 - Close the entire tag on the next line: (example)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

Method 2 - Reset the font-size

Since the whitespace between the inline elements is determined by the font-size, you could simply reset the font-size to 0, and thus remove the space between the elements.

Just set font-size: 0 on the parent elements, and then declare a new font-size for the children elements. This works, as demonstrated here (example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

This method works pretty well, as it doesn't require a change in the markup; however, it doesn't work if the child element's font-size is declared using em units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by inline elements.

Method 3 - Set the parent element to display: flex

In some cases, you can also set the display of the parent element to flex. (example)

This effectively removes the spaces between the elements in supported browsers. Don't forget to add appropriate vendor prefixes for additional support.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {    display: flex;}.parent > div {    display: inline-block;    padding: 1em;    border: 2px solid #f00;}

<div class="parent">    <div>text</div>    <div>text</div>    <div>text</div>    <div>text</div>    <div>text</div></div>

Cannot remove padding from div

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>

table {    width: 100%;    border-collapse: collapse;    table-layout: fixed;}th, td {    border-bottom: 1px solid black;    padding: 0;    margin: 0;}.wrapper {    background-color: green;    position: relative;    width: 100%;    border-top: 1px solid blue;}.abs {    position: absolute;    top:0;    margin: 0px;    padding: 0px;    background-color: red;}

<table>    <colgroup>        <col width="200px"></col>        <col width="300px"></col>    </colgroup>    <thead>        <tr>            <th>Caption 1</th>            <th>Caption 2</th>        </tr>    </thead>    <tbody>        <tr>            <td>                <div class="wrapper">                     <div class="abs">abs</div>                </div>            </td>            <td>Content 2</td>        </tr>    </tbody></table>