为 br 添加颜色

Question

I want to give <br /> some color. but it is not getting applied

Here is the HTML

<br style="color:#EAEFF5" />

here is the screenshot. I want the white space to be colored

UPDATE

<div style="background-color:#EAEFF5; width:100%;" style="border: 1px solid black; border-collapse:collapse;" cellpadding="5px" cellspacing="2px">
<table  width="60%" cellpadding="5px" style="border: 1px solid black; border-collapse:collapse;"  cellspacing="1px" align="center">
    <tr>
        <th class="label" style="font-size: 120%; font-family: Courier New; text-align:center">
            Date
        </th>
        <th class="label" style="width: 7%; font-size: 120%; font-family: Courier New;text-align:center">
            Flat Status
        </th>
        <th class="label" style="width: 7%; font-size: 120%; font-family: Courier New;text-align:center">
            Comments
        </th>
    </tr>
    <tr>
        <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New;text-align:center;">
            <input type="text" runat="server" id="txtdate" style="width: 75px;"/>
        </td>
        <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New;text-align:center;">
            <%--<input id="txtcomments" type="text" runat="server" style="width: 75px;" />--%>

             <select id="ddlflatstatus" style="width: auto" name="flatstatus" runat="server">
                <option value="0">--- Select ---</option>
            </select>

        </td>
        <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New;text-align:center;">
            <%--<input id="txtstatusdet" type="text" runat="server" style="width: 75px;" />--%>

             <asp:TextBox ID="txtcomments" runat="server" Width="150" TextMode="MultiLine"></asp:TextBox>

        </td>

    </tr>
</table></div>

<br style="background-color:#EAEFF5" />

Answer 1

In HTML, you should never add styles to a whitespace character, which is what <br> effectively is.

Rather use a separator:

<div style="height: 10px; background-color: #EAEFF5"></div>

Answer 2

It's not guaranteed to get uniform styling for <br> across all the browsers so I suggest you use a div with empty content and style that accordingly.

<h1>Some Text</h1>
<div class="breaker"></div>
<p> Some Paragraph</p>

CSS

.breaker{
  color : red;
  border : 1px solid green;
  margin-bottom : 5px;
}

Here's a Pen to help you realize these changes.

Answer 3

this should work

<br/>
<div style="background-color:lightgray;color:lightgray"><br/></div>
<br/>

Answer 4

You can't give br a color. A possible solution would be to use some a custom class on an empty element and then style that element using CSS.

For Example:

HTML

<span class="custom-br"></span>

CSS

.custom-br {
  display:block;
  width: 100%;
  height: 5px;
  background-color: #cb0009; /*change color*/
}

Answer 5

Instead of using <br> you can use DIV like this:

<div>Some text</div>
<div style="background-color:##EAEFF5;height:10px;"></div>
<div>This is under the break</div>

Answer 6

instead of coloring there add this

<div style="background-color:#EAEFF5 !important;>

you should use !important