Why Anchor Tag Does Not Take Height and Width of Its Containing Element

Anchor tag not taking height of its content

Your HTML and CSS code is not valid, but i worked with it and this is the valid one with the solution that I think it's ok.

CSS:

Remove the position from the link element and add display block to it.

img {
    padding: 2px;
    border: 2px solid grey;
}

img:hover { border: 2px solid blue }

.project-box {
    width: 190px;
    position: relative;
}

a {
    text-decoration:none;
    color:#000;
    border:1px solid yellow;
    display: block;
}

.project-picture-container {
    width: 100%;
    height: 150px;
}

.project-heading { font-size: 0.8em }

.project-heading-container {
    height: 15px;
    margin: 8px 0 4px 0;
    padding: 0 2px 0 2px;
}

.project-desc-heading {
    height: 60px;
    padding: 0 2px 0 2px;
    border: 1px solid red;
    font-size: 0.7em;
}

HTML:

<div class="project-box">
    <a href="#" class="project-link">
        <div class="project-picture-container">
            <img src="http://b.vimeocdn.com/ps/359/823/3598236_300.jpg" width="182px" height="142px" alt="project image">
        </div>
        <div class="project-desc-container">
            <div class="project-heading-container">
                <h2 class="project-heading">
                    Project Name
                </h2>
            </div>
            <h3 class="project-desc-heading">
                This is the description about the project.
            </h3>
        </div>

    </a>
</div>

Demo

Hope it works as you want.

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.

Anchor tag not filling height and width

You can try doing this.

remove the float:left on .gallery img. and then add display:inline-block on .gallery img and .gallery

.portfolio {  width: 90%;  position: relative;  left: 80px;}
.portfolio h1 {  text-align: center;  margin-bottom: 50px;  margin-top: 50px;  font-size: 60px;}
.gallery{  display:inline-block;}
.gallery img {    display:inline-block;    margin: 5px;    height: 230px;    width: 330px;    border: 1px solid #000;    border-radius: 3px;}
.gallery a {  display: inline-block;}

<section class="portfolio"><h1>— PORTFOLIO —</h1><div class="gallery">  <a href="#">    <img src="img/img1.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img2.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img3.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img4.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img5.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img6.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img7.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img8.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img9.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href=#"">    <img src="img/img10.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img11.jpg" alt="Sample Image">  </a></div>
<div class="gallery">  <a href="#">    <img src="img/img12.jpg" alt="Sample Image">  </a></div></section>

Why isn't this anchor tag taking up 100% of the available space of its parent div?

I believe its because the block element has no content inside of it. If you add a letter inside the anchor link the anchor link will become 100% of the width of the div.

If you add width:100% and height:100% it will take up the entire div.

How can I contain an anchor tag inside my button tag at 100% width and height

The reason you cannot adjust the height and width of your <a> is because anchor elements are inline-elements.

An inline element does not start on a new line and only takes up as much width as necessary.

If you want to adjust the height and width you would need to specify another display property, e.g.

a { display: inline-block; }

For what it's worth, it's better to omit the button inside the anchor tag, just style the anchor tag as your button to make it act like a button.

e.g. if you are using bootstrap, you can do

<a href="#" class="btn btn-primary" role="button">Get Started</a>

Why doesn't a fill up td but it has width and height on 100%

The reason is that the <a> tag by default is shown as display: inline, which doesn't respond to width and height CSS; you'd have to change it to display: inline-block which does.

Additionally, if your table cell has padding, and you want the <a> to fill it entirely, either remove the cell's padding or apply a negative margin to the anchor equal to the padding of the cell.

Setting a width and height on an A tag

You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.

Div within an anchor tag not taking up entire width? HTML and CSS

If you remove the left/right padding on the anchors, and extend the width of your .project elements to 320px, it should look how you want it - though I'm not sure if you have the padding there for some other purpose.

.project {
    width: 320px;
    height: 300px;
    background-image: url('http://via.placeholder.com/300x300');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    margin: 20px 20px 0 20px;
}

a {
    text-decoration: none;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 30px;
    padding: 0;
}

http://jsfiddle.net/dtwLjqx4/

anchor tag is larger than element it holds

Its caused by the margins you have on the images in the links. You want to move the margins to the anchor tags

#buttonHolder a {
display: block;
margin: 155px auto 10px;
width: 226px;
}

And give the images no margin

#buttonHolder img {
display: block;
margin: 0;
}

Make anchor tag fill 100% height and width of parent flex element, whilst being vertically & horizontally centered

Don't be afraid, make anchor flexbox too:

a {
    display: flex;
    justify-content: center;
    align-items: center;
}

and you should add align-items: stretch to parent of anchor.