Why is there no margin applied to the bottom/top?

[espio100]

Need HTML help once again because honestly forget this code

basically I cant get a margin at the bottom. Padding works however but it doesnt extend the black box

html

Code: [Select]

<div class="banner container-fluid">
<div class="bannerimage">
<img class="img-responsive" src="http://tremendouswallpapers.com/wp-content/uploads/2014/11/140323_Underwater-Fish-Cool-Wallpapers-Beautiful-Jelly-HD_1920x1200.jpg">
</div>
<div class="bannertext">
<h1>Lorem ipsum</h1>
<a href="#">Dolor sit amet</a>
</div>
</div>
css

Code: [Select]

.bannerimage {
position: relative;
height: 600px;
overflow: hidden;
}
.bannertext {
position: absolute;
top: 200px;
left: 0px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
margin-left: 250px;
padding-right: 30px;
padding-left: 15px;
color: white;
text-decoration: none;
}
.bannertext h1 {
margin-top: 10px;
margin-bottom: 0px;
}
.bannertext a {
color: white;
margin: 20px;
}
.bannertext a:hover {
color: red;
text-decoration: none;
}
Also not that it matters but the layout is ass because the webpage is so small

[Ad Bot]

[Foxscotch]

no clue what you're trying to say dude. what's the problem? what is it supposed to look like?

[Steve5451²]

no clue what you're trying to say dude. what's the problem? what is it supposed to look like?

[Master Matthew²]

.bannertext supercedes the styles you gave to the individual tag you're showing there.

You only have left and right padding because .bannertext only has left and right padding.

Code: [Select]

.bannerimage {
position: relative;
height: 600px;
overflow: hidden;
}
/* v This peice of code here supercedes... v */
[b].bannertext {
position: absolute;
top: 200px;
left: 0px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
margin-left: 250px;
padding-right: 30px;
padding-left: 15px;
color: white;
text-decoration: none;
}[/b]
/* v ...this piece of code here v */
.bannertext h1 {
margin-top: 10px;
margin-bottom: 0px;
}
.bannertext a {
color: white;
margin: 20px;
}
.bannertext a:hover {
color: red;
text-decoration: none;
}

[espio100]

no clue what you're trying to say dude. what's the problem? what is it supposed to look like?

in the image at the inspect code part you can clearly see there is 20 pixels of margin applied to every direction. However on the site itself its only applied to the left and right side.
All I want really is a few pixel of space at the bottom where the black background goes a little further then the text and I tried doing so by adding a little bit of margin. Just like I did at the h1 element, where it worked. but somehow it doesnt work at the a element.

[Foxscotch]

.bannertext supercedes the styles you gave to the individual tag you're showing there.

literally no. more specific selectors take precedence

in the image at the inspect code part you can clearly see there is 20 pixels of margin applied to every direction. However on the site itself its only applied to the left and right side.
All I want really is a few pixel of space at the bottom where the black background goes a little further then the text and I tried doing so by adding a little bit of margin. Just like I did at the h1 element, where it worked. but somehow it doesnt work at the a element.

add 20px padding to all sides of the box, and remove the extra margins/padding for anything in it

.bannertext {
  padding: 20px;
}

then you can add margin-top to the smaller text if needed to space it from the heading

[espio100]

.bannertext supercedes the styles you gave to the individual tag you're showing there.

You only have left and right padding because .bannertext only has left and right padding.

What
Style that are lower then the original one override the original one
or however the forget im supposed to explain it

Basically when you get ".this a color:red;" and you write the ".this a color:blue" a few lines further the color will be blue because it overrides the original red.
A elements are actually blue by default but piss off the doesnt matter

literally no. more specific selectors take precedenceadd 20px padding to all sides of the box

.bannertext {
  padding: 20px;
}

Oh cool thanks <3