How to stretch the nested <a> tag with respect to parental padding

Question

#parent { display: table-cell; width: 100px; height: 50px; padding: 0 10px; border: 1px solid red; } #inner { display: block; width: 100%; height: 100%; border: 1px dotted green; /*Надо растянуть элемент с учетом padding, то есть чтобы ширина была 110px*/ }

 <div id="parent"> <a id="inner">TextThatShould</a> </div>

To add a snippet, click this button on the picture: i.stack.imgur.com/ZPQvE.png

lexxl lexxl 5,051 2 13 35 · Accepted Answer · 2016-05-26T06:55:16

I think the following option will suit you:

 #parent { display: table-cell; height: 50px; border: 1px solid red; } #inner { display: block; height: 100%; border: 1px dotted green; /*Надо растянуть элемент с учетом padding, то есть чтобы ширина была 110px*/ padding: 0 10px; }

 <div id="parent"> <a id="inner" href="#">TextThatShould</a> </div>

And why, as I expected, the text area does not crawl over the size of the parent?
@Herrgott and why does the child have to get out of the parent, especially when the parent is a cell)
@Basily, I just often met with such behavior and many times threw the study of web design.
He is responsible, just the same, for the behavior of the element on the page.
And in fact, it is more correct that it is the heir who was stretching the parent (in cases with menus or items)

How to stretch the nested <a> tag with respect to parental padding

1 answer 1

More articles: