Inheriting Height of a Child Node (Img Inside A)

Inheriting height of a child node (IMG inside A)

inline-block will solve the problem, but it wont work with IE.

http://jsfiddle.net/dbugger/z5gdA/3/

Does a child div inherit parent's height?

A child element does not inherit the height of its parent.

Reference: MDN

You can however set its value to height:inherit; CodePen Example

You could also use height: 100% or max-height: 100%

In any situation you have to think what you want to do with the content if it is too much to fit in that set height: overflow: hidden; overflow-y:hidden; overflow-y: scroll.

Does img inherit parent element dimensions?

Some styles, like font family, text-alignment are automatically inherited by child elements from their parent element .Others are not automatically inherited
.In this case, you have to set width and height to parent and then specify inherit property in css code

try below code

     table {
            width:100%;
        }
        td{
            width: 30%;
            border: 1px solid red;
        }

after that
you have to specify inherit property

img {
    height: inherit;
    width: inherit;
}

Why anchor tag does not take height and width of its containing element

The CSS 2.1 spec says

The dimensions of the content area of a box — the content width and
content height — depend on several factors: whether the element
generating the box has the 'width' or 'height' property set, whether
the box contains text or other boxes, whether the box is a table, etc.
Box widths and heights are discussed in the chapter on visual
formatting model details.

The <a> element defaults to a display value of inline. Its contents participate in the layout so it is a non-replaced element.

For height, the spec says:

10.6.1 Inline, non-replaced elements

The 'height' property does not apply. The height of the content area
should be based on the font, but this specification does not specify
how.

So 18px is arrived at from a single line of text, taken from the font metrics. Neither the larger image content, nor the containing block size plays any part.

For width, the spec says

10.3.1 Inline, non-replaced elements

The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

in other words, the width is determined by the <a> element's contents, paddings, borders and margins.

For the first <a> element that's 114px (contents - image plus one space) + 20px (left margin) + 2x5px (left and right border) = 144px

For the second <a> element that's 280px (contents - image) + 20px (left margin) + 2x5px (left and right border) = 310px

Just need to account for the spaces. The elements are being laid out in a line box in a inline context, so the spaces at the start of the first <a> element and at the end of the second <a> element are being dropped. The spaces at the end of the first <a> element and the start of the second <a> element are being collapsed into one space. When spaces are collapsed, it's always the first space which remains, which in this case is the one at the end of first <a> element, so that's why a space participates in the width of the first <a> element but not in the width of the second one.

Child inside parent with min-height: 100% not inheriting height

This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

Apparently Firefox is affected too (can't test in IE at the moment)

Possible workaround:

• add position:relative to #containment
• add position:absolute to #containment-shadow-left

The bug doesn't show when the inner element has absolute positioning.

See http://jsfiddle.net/xrebB/

Edit on April 10, 2014

Since I'm currently working on a project for which I really need parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

First: I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.

If I put a min-height on my container, I'm not explicitly specifying its height - so my element should get an auto height. And that's exactly what Webkit - and all other browsers - do.

Second, the workaround I found:

If I set my container element to display:table with height:inherit it acts exactly the same way as if I'd give it a min-height of 100%. And - more importantly - if I set the child element to display:table-cell it will perfectly inherit the height of the container element - whether it's 100% or more.

Full CSS:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

Why child elements of body element don't inherit/reference to, the height property of parent element?

The parent won't determine the child's height unless you give a 100% height to the child itself inside the parent.

That way you tell the child that it has to use up the full height of it's parent.

Setting the parent's height only provides space for the child to exists by it's default size. You need to tell it how much space it can use up.

If the dimensions would be inherited by all the children inside a parent (which is the body in your case) that would cause a huge mess, since a lot of elements would break out of their containers, because they would get in conflict while trying to fill up the space.

Why doesn't my image width inherit from parent div width

Try this FIDDLE

#image-container {
    width: 750px;
    height: 360px !important;
    text-align: center;
    overflow: hidden;
}

#image-container img{ 
    width: inherit;
}

background color of parent matching height of child with negative top and bottom margins

body {  background-color: #DBD9DB;}

#parent {  background-color: #fff4d7;}
#parent:before,#parent:after {  content: " ";  display: block;  height: 50px;  background-color: blue;}
#child {  background: none #FFF;  position: relative;  text-align: center;  width: 80%;  margin: -50px auto;}
.parent {  width: 100%;  height: auto;  margin: 0 auto 0 auto;  background-color: #b5b5b5;  overflow: hidden;  position: relative;}

img {    width: 100%;    height: auto;}
.clearfix {  overflow: auto;  zoom: 1;}

<body>  <div class="parent clearfix">    <div class="css-slideshow">          <div id="parent">                        <img class="clearfix" src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />      <div id="child">        <h1>Title</h1>        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti.          Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>      </div>    </div>    </div>  </div></body>

---

Related Topics