Why img takes a height when it's an inline element?

<img> tag is not strictly an inline element, but a inline-replaced element.

In a nutshell, it means that <img> (and other elements, as <video> or, <object> if you still use it), has intrinsic dimensions. So CSS can handle those dimensions (and other properties, such as margins). Because <img> is an inline tag, that is replaced by its own source file (well, it's still an inline element).

Some doc about that :

• https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
• http://www.w3.org/TR/REC-html40/struct/objects.html#edef-IMG

Funny fact (I guess) : you can't override (or simply handle) inline-replaced behavior to "normal" inline behavior on those elements with CSS (when it works when you set it to inline-block or block or whatever you want). See this example : http://jsfiddle.net/s8apbbof/

Width property of css on img tag

By default img is an inline element but the dimensions are defined by the dimension of the image itself.
You can set the value for with and height allowing it to take up space before it loads, to mitigate content layout shifts.

From MDN :
<img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. You can set properties like border/border-radius, padding/margin, width, height, etc. on an image.

Why doesn't line-height work on img elements?

The page you link to says:

On replaced inline elements such as buttons or other input elements, line-height has no effect.

img elements are replaced inline elements, so line-height has no effect on them.

You need an extra element if you want to set the line height of a line box around an image.

span {

  line-height: 200px;

}

div {

  outline: solid black 1px;

}

<div>

  Hello <span> <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="Sample Image"> </span> World

</div>

<div>

  Hello

  <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="Sample Image">World

</div>

Is img element block level or inline level?

It's true, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.

In CSS, you can set an element to display: inline-block to make it replicate the behaviour of images*.

Images and objects are also known as "replaced" elements, since they do not have content per se, the element is essentially replaced by binary data.

* Note that browsers technically use display: inline (as seen in the developer tools) but they are giving special treatment to images. They still follow all traits of inline-block.

Extra height on wrapper when img is not a block element?

By default, an image is rendered inline, like a letter.

It sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like j, p and q.

You can adjust the vertical-align of the image to position it elsewhere.

css height property won't apply to html img but width does

It's working now. Idk if it's completely responsive, but a quick test was good. I added a non-relative height (height: 75px;) to the parent element and added display: flex. Thanks for the responses!

working css

#header-bar {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
}

#header-content {
    margin-left: 25px;
    height: 75px;
    display: flex;
}

#site-logo {
   height: 100%;
}

#title-wrapper {
    display: inline-block;
    margin-left: 25px;
    height: 100%;
}

#website-title {
    color: rgb(56, 56, 56);
}

#selected-center-city-name {
    text-align: right;
    margin-right: 25px;
    margin-top: 10px;
    color:rgb(107, 107, 107);
}

Why does image use display: inline but behaves like an inline-block element

The default browser stylesheets were initially created using CSS1 for HTML3.2, so inline-block was not available or necessary. There's no difference between them for image elements.

References

• CSS 1 Specification
• HTML 3.2 Specification

---

Related Topics