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

by

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.

More Related Contents:

  1. Bad: [html] in html code i can’t make two form input in one row [closed]
  2. How to center an element horizontally and vertically
  3. Make container shrink-to-fit child elements as they wrap
  4. How to overlay one div over another div
  5. Element will not stay centered, especially when re-sizing screen
  6. css ellipsis on second line
  7. CSS selector by inline style attribute
  8. Position an element relative to its container
  9. curved div with transparent top
  10. How to center nav-items in Bootstrap? [duplicate]
  11. How to prevent line breaks in list items using CSS
  12. How to make Bootstrap 4 cards the same height in card-columns?
  13. How to stretch flex child to fill height of the container?
  14. Set width of dropdown element in HTML select dropdown options
  15. CSS selector with period in ID
  16. Loading an external font via inline CSS
  17. Get input type=text to look like type=password
  18. How remove border around image in css?
  19. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  20. How to display text, a dotted line then more text spanning the width of the page?
  21. How can I apply a border only inside a table?
  22. What does the clearfix class do in css? [duplicate]
  23. Center image in div horizontally [duplicate]
  24. Why doesn’t vertical-align work properly when using float in CSS?
  25. How to center an unordered list?
  26. Center align container and left align child elements
  27. a href link for entire div in HTML/CSS
  28. How to change border color of textarea on :focus
  29. Prevent floated divs from wrapping to new line
  30. How to get horizontal scroll bar in select box in IE?

Leave a Comment