This question already has an answer here:
What is the point of CSS collapsing margins?
(1 answer)
Closed 5 years ago.
The margin-bottom style is not working for <h1> tag as seen in the following image. The margin between heading and anchor tag buttons is not the same as specified for <h1>. What is the reason for the same?
Code:
<div>
<p>Hellos!</p>
<h1>I'm Evans Gene<br>What's Up!</h1>
About me
See Profile
</div>
.pBtn {
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
font-weight: 400;
margin: 20px 10px 0px 0px !important;
padding: 10px;
text-decoration: none;
}
The issue is the following:
Anchor tags can be used as buttons but <a> is different than <button>. And here, the orange highlighter depicting the margins of the <h1> sticks to the top of the text in <a>, instead of its top border, because it has border around it to make it look like a button, but semantically it is not a button.
To show the difference, just changing the <a> to <button> will shift downwards due to <margin-bottom> of <h1>.
Edit: From the comment of UncaughtTypeError User.
The issue is actually with the display type properties of the buttons in question, by default anchor tag elements (a) are computed as display: inline, this should be updated to display: inline-block to attribute block type properties to the elements (like margin values).
Related
https://i.imgur.com/T1hiXMO.png
Here is what it looks like right now. Clicking anywhere inside the black border links to the URL. I only want the text "RANKINGS" to be linked.
HTML:
<div id="div1">
RANKINGS</h4>
</div>
CSS:
#title {
margin-top: -10px;
font-size: 20px;
color: #e846ff;
text-align: center;
font-family: 'Trebuchet MS';
border: 1px solid black;
}
You are adding a Heading element (h4) inside an anchor (a) element.
Even though Anchors are inline elements, meaning they don't take the full width of the screen, you added a Heading element inside that Anchor.
Heading elements are block elements and they do take up the full with of the screen.
It would be better to reverse the html as seen in this codepen:
<h4 id="title">
<a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>
This way you get you wanted.
As h4 is a block level element it takes the entire width of the window. use span tag instead of h4. Also h4 is not valid inside a tag. Still if you want to keep it you need to apply
#title{
display:inline;
}
Because, probably, it's element with value block in property display. Inspect element and check it in such cases. Block elements have 100% width. If you need, change display: block; to display: inline; (in headings width 100% set as default) or another value for auto width. Also, you should check display of link, in this case.
Another way to solve this issue is to give your a element the width: fit-content; property. This will make the link hug the text and not extend beyond it:
<h4 id="title">
<a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>
(CSS:)
h4 a{
width: fit-content;
}
Inside of a parent element which is a paragraph, there is text and a couple of anchor links. These anchor links have their display set to inline-block and the visual result looks like this:
https://imgur.com/a/aLR3Q
Now if I would change the display to inline, the result looks like this:
https://imgur.com/a/TFof9
My question is, why does having the display of the anchors set to inline-block instead of just inline cause this, let's just say "soft line break" ? Because I thought that in terms of line-breaks, both of the displays act in the same way, and don't break at all.
Codepen link for the code: https://codepen.io/Kestvir/pen/zpvmYV
The code for the parent element:
.footer__copyright {
border-top: 1px solid #777;
padding-top: 2rem;
width: 80%;
float: right;
}
The code for the anchors:
footer__link:link, .footer__link:visited {
color: #f7f7f7;
background-color: #333;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
transition: all .2s;
}
The anchors are:
Jonas Schmedtmann
and
Advanced CSS and Sass
The line break happens because the the inline block cannot be split across multiple lines like a normal inline element. It is simply one entire "block unit" that is displayed inline. If that entire unit does not fit, then it will all be wrapped down to the next line.
This question already has answers here:
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 6 years ago.
As the title says I have a <button> tag which has the CSS display: block; which should automatically make the element span the width of the container right? I have other buttons on the page but they are <a> tags but with the same css class as the <button> tag.
Website can be found here: http://www.cqwebdesign.co.uk/stirlinggrey/ as you can see each section as a button link at the bottom. However the one in quest is at the bottom of the page in the section with the title: "TO RECEIVE YOUR FREE GUIDE AND QUOTE"
Codepen version: http://codepen.io/anon/pen/zoOQQL
HTML:
This is a button
<button class="btn">This is a button</button>
CSS:
.btn {
font-size: 16px;
font-family: Open Sans;
color: #fff;
border: 0;
background: #000;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
line-height: 1.5;
display: block;
margin-bottom: 10px;
}
Thanks
If your issue is that the button needs to be centred, you need to do clear: both; in order to clear it from being affected from the floated elements above.
Block level elements take up the full width, but it does not affect the width of the element itself. Use the width: ; tag to change this.
Hope this helps :)
I was trying to underline my whole heading (h1), which is divided into two lines like this:
And I've done it successfully but didn't quite understand the logic behind it, i.e. when I apply this CSS, it didn't work:
CSS:
.main h1 {
font-size: 65px;
text-transform: capitalize;
font-weight: bold;
border-bottom: 5px solid #1A77FF;
}
Whereas, when I added span tag it worked for me
CSS:
.main h1 span {
font-size: 65px;
text-transform: capitalize;
font-weight: bold;
border-bottom: 5px solid #1A77FF;
}
Can anyone please explain this to me? Thanks in advance.
Sure.
Any heading tag (like an h1) is a block level element so any border applies to the block as a whole rather than the text inside.
A span is an inline element and is only as wide as the content (with certain constraints). So the bottom border only applies to the span content even when the line breaks.
Mozilla.org (Understanding the inline box model)
Inline boxes are laid out horizontally in a box called a "line box":
If there isn’t enough horizontal space to fit all elements into a single line (or the line is forcibly broken), another line box is created under the first one. A single inline element may then be split across lines
When an inline box is split across more than one line, it’s still logically a single box. This means that any horizontal padding, border, or margin is only applied to the start of the first line occupied by the box, and the end of the last line.
H1.block {
border-bottom: 3px solid red;
}
H1 SPAN {
border-bottom: 3px solid blue;
}
<h1 class="block">BLOCK FORMAT</h1>
<h1><span>INLINE <br/> FORMAT</span></h1>
<div> is a block level element whereas <span> is an inline element.
When you use <div>, it wraps the text in a complete block as follows. So, border property is applied to that whole block.
And when you use <span>, it wraps the content line by line. So, when border property is added, it is shown under each line.
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.