CODEWITHSUNDEEP
c#asp.net-mvcrazor
Ian
Ian

Reputation: 30823

after <text>, in cshtml, single <br /> does not give line break

Though slightly different, this question does not seem to be new, yet the only answer given in the link is rather short and not as explaining.

I am creating an ASP.NET MVC web App and in one of my cshtml file I have the following lines:

<text>@Html.ActionLink("Create New Employee", "Create")</text>
<br />
something else below

Although I already put a line break, the result is the same with if I do not put any <br />, both will be rendered into the following result:

enter image description here

Notice that "Mark" is directly put after "Create New Employee". And the result is identical with when I only put

<text>@Html.ActionLink("Create New Employee", "Create")</text>
no break here
something else below

without <br/>

Only when I put double <br /> then it will be rendered with extra line break:

<text>@Html.ActionLink("Create New Employee", "Create")</text>
<br />
<br />
something else

resulting in:

enter image description here

Now, I am not pretty new to web app making, thus there might be some special properties of <br/> tag which I am not aware of. When I used <br/> after <h4> or <table> it seems fine. But why when I put after <text>, before <ul>, it cannot be rendered as I expected? Is this common issue to put two <br/> instead of one?

Upvotes: 0

Views: 2581

Answers (1)

krivtom
krivtom

Reputation: 24916

It seems that something else below in your code stands for unordered list (ul) with some list items (li), so I guess your generated HTML looks something like this:

<a href="#">Create New Employee</a>
<ul>
    <li><a href="#">Mark</a></li>
    <li><a href="#">Luke</a></li>
</ul>

Let's investigate what is going on. a is inline element. As described in this article:

An inline element does not start on a new line and only takes up as much width as necessary.

ul element on the other hand is block-level element, and as described in the same article

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

So based on description above, ul always starts from the new line. If you don't add br after a, then ul is moved to next line automatically. If you add br, then there is no need to move ul to a new line because it is already there.

So overall - a line break before ul seems to be ignored, because ul is block-level element and it is displayed on the new line.

I created jsFiddle with visible element borders, so it is clearer to see what is going on.

Upvotes: 2

Related Questions