2

(Initial definitions):

  1. Block = element whose display: block.

  2. Box-model: width, height, padding, border (whpb) dimensions. Margin's not included.

  3. I presume a child element lives in the content-area of their parent (by that I mean the child's box-model properties (& potentially margin) bounce off/stretch the walls of their parent's content-area). If this isn't so, do tell me but also read the rest of my question as if I am just talking about when a child 'lives' in its parent's content-area.

  4. This question presumes all elements have box-sizing: content-box.

  5. Parental margin-collapsing: when the margin-top of the first child & margin-bottom of the last child collapse with the margin-top & margin-bottom of the parent, respectively.

My understanding of how to determine height of a block when its height: auto;

When element has no child elements:

0 or when it contains text, the number of lines of text. 1 line of text = value of line-height.

When element has child elements which themselves have no child elements:

When parental margin-collapsing doesn't take place (perhaps parent has block-formatting-context (BFC)) height is sum of child elements' box-models + lines of text + margins between them + margin between first & last child and top and bottom edge of parent's content-area. When element parental margin-collapsing does take place its the same formulae but without 'margin between first & last...'.

tonitone120
  • 1,920
  • 3
  • 8
  • 25
  • 5
    I have no idea what you are actually asking.... What is the question? – epascarello Sep 15 '20 at 17:37
  • @espscarello just how to determine the `height` of a block when the block's height is set to `auto` – tonitone120 Sep 15 '20 at 17:40
  • Get the element, then read [`element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)? – Heretic Monkey Sep 15 '20 at 17:51
  • Thank-you @HereticMonkey. I've changed the title of my question to make it more clear that I'm trying to understand the logic of how HTML & CSS work that gives it the height it gets – tonitone120 Sep 15 '20 at 17:55
  • Then please [edit] your question to make that much clearer. – Heretic Monkey Sep 15 '20 at 17:57
  • 1
    You have been asking a bunch of questions about your understanding of documentation for HTML/CSS - what specific question are you trying to understand? Right now, your question isn't clear about what problem you are running into. – disinfor Sep 15 '20 at 18:07
  • Thanks for the response @disinfor. A general understanding of what `height: auto;` means. There is no specific problem. What is unclear about the question? – tonitone120 Sep 15 '20 at 18:11
  • 1
    Stack Overflow really isn't a classroom and is better used for *specific* coding questions that involve code. To make your question better, you should create different versions of coding that involve `height: auto` and then if one of those gives you a result you *aren't* expecting, then post a question. – disinfor Sep 15 '20 at 18:19
  • One thing to note is that HTML is responsive by default, and `height: auto;` just means that it will automatically render its height to display the content. How it is *"done"* is up to the rendering engine of the browser. So in turn, what you're asking could be a long drawn out discussion about how HTML and CSS is interpreted by the browser on a base level. – Martin Sep 15 '20 at 18:29
  • @Martin So you relinquish quite a lot of control when you use `height: auto`? – tonitone120 Sep 15 '20 at 18:35
  • @tonitone120 _relinquish control_ is not accurate. It depends on the context of using `height: auto` as using `height:auto` on an `img` tag with a `width` property set is exerting control over native browser behavior. Again, post code to show an example where it doesn't work as expected - because the documentation is pretty thorough. – disinfor Sep 15 '20 at 18:49
  • I'm with @disinfor on this one. The topic itself is pretty vague and what you're asking is basically how the rendering engine interprets the HTML and CSS. Other than that, the understanding of what you're asking from a development standpoint has thorough documentation as disinfor puts it. – Martin Sep 15 '20 at 20:00
  • @Martin it's not that vague and we don't really need to understand the behind the scene of the rendering engine. An understanding of the Specification is all what we need here – Temani Afif Sep 15 '20 at 20:04

0 Answers0