1

The inline element display perfectly if I remove the border or I change the display to block or inline-block. I don't understand why I can't see the border.

enter image description here

html:

<div class="content">test test test</div>

css:

body{
  padding: 0;
  margin: 0;
}
.content {
    display: inline;
    background: palegreen;
    border: 5px solid red;
}

http://jsfiddle.net/Kodam/h1c3r5u3/

Doc Kodam
  • 723
  • 6
  • 14
  • And the question is ... ? – Cheery Oct 10 '14 at 22:31
  • possible duplicate of [Why is the top border of this inline element not displaying and why does using float correct this?](http://stackoverflow.com/questions/9195737/why-is-the-top-border-of-this-inline-element-not-displaying-and-why-does-using-f) – BenM Oct 10 '14 at 22:33
  • @BenM Thanks for sharing the link. I'd like to add that the computed `width`/`height` of an non-replaced `inline` element is `auto` which means that the computed height is relative to the height of the line box itself which can be altered by `line-height`. – Hashem Qolami Oct 10 '14 at 22:38
  • @Doc Kodam, just viewed your profile and wanted to say that it is not very polite to receive valid answers for your questions and not accept them at all .. – Michal Hosala Oct 10 '14 at 22:52
  • @MichalHosala Sry. I didn't know I could do it. – Doc Kodam Oct 10 '14 at 23:05
  • @Doc Kodam, easy to miss, procedure is described [here](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work): "To mark an answer as accepted, click on the check mark beside the answer to toggle it from hollow to green" – Michal Hosala Oct 10 '14 at 23:07
  • @HashemQolami but the width in this case is including the border-left or not? – Doc Kodam Oct 10 '14 at 23:18

2 Answers2

2

Let me quote this answer:

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

But if top border would be taken into account, it would make your div vertically misaligned with the other elements on the same line, even though in your case there is only a single element on the line. However, top border is ignored, therefore it is "sticking out" of the body and you cannot see it.

As a "proof", try to modify your HTML code in the provided fiddle as:

<div style="line-height: 50px"><div class="content">test test test</div></div>

Then you'll be able to see the top border, as the height of parent element has enough space for it not to stick out.

Community
  • 1
  • 1
Michal Hosala
  • 5,570
  • 1
  • 22
  • 49
0

Why not use display: inline-block ?

.content {
    display: inline-block;
    background: palegreen;
    border: 5px solid red;
}
Mirza Delic
  • 4,119
  • 12
  • 55
  • 86