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.
Related
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've been looking around Google but can't find a CSS way to increase the height of the background of selected text.
For example the background of the selected text in the Atom editor is noticeably higher than the right one:
Since Atom is made with HTML/CSS, I wonder if there's a combination of CSS which can achieve this result?
This is a bit hacky but you could do it by using a pseudo element (like ::before) that has a content of non-breaking space and some padding to create the line-height illusion:
body {
background: #000;
color: #FFF;
}
::selection {
background: red;
}
p::before {
content: "\00a0";
padding: 10px 0;
display: inline-block;
}
This is default text
<p>This text has a pseudo element</p>
jsFiddle: https://jsfiddle.net/azizn/8bmj4dm1/
Caveat: this will require wrapping each line in a tag. You could probably use JavaScript to automatically wrap each line in a tag for this to work with multi-line content.
I have applied background-color: #C0C0C0; to my span element .grey_bg but the background is not changing color. Why is that?
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
Because it's not really valid HTML to put block-level H1 element inside span (inline element). You can either use div instead of span
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<div class="grey_bg">
<h1>Hey</h1>
</div>
... or make span block-level too:
span {display: block;}
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
First your markup is not correct. You can't have a block element, h3, inside an inline element, span.
But in case you want to keep that markup, you have to make the container element to behave as block. So make it as:
.grey_bg {
width: 100%;
background-color: #C0C0C0;
display:block;
}
Your code is incorrect because your span is wrapping your H tag.
You should not use span to wrap inline element's like H tag's. Instead you want the span to be inside your H tag.
The span element is the inline level generic container. It also helps to inform the structure of document, but it is used to group or wrap other inline elements and/or text, rather than block level elements.
The line between the two different types might seem fairly arbitrary at first. The difference to bear in mind is the type of content, and how it would appear when written down without any styling. A div is placed around a group of block level elements—for example, to wrap a heading plus a list of links to make a navigation menu. A span wraps a group of inline elements or (most usually) plain text. The key word is “group”: if a div wraps just one block-level element, or a span just one inline element, it's being used unnecessarily. For example, check out the way the div and span elements are used in the following simple markup:
W3C
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<h1><span class="grey_bg">Hey</span></h1>
I figured out that I had to target the h1 as well in the css:
.grey_bg h1 {
background: #C0C0C0;
}
For reasons explained below, I am using relative positioning on <span> inside <a> in order to slightly change the position of the text wrapped with <span> (to place it 2px higher than it's placed automatically). When I do this, obviously, the text-decoration: underline; is broken and below my <span> it is also starting 2px higher. Please see the fiddle: http://jsfiddle.net/8qL934xv/
I would like know, if there is a way to make the <a> underline run below the <span> as well, unbroken and preferably with HTML/CSS only.
How I came across this problem:
I am building a bilingual website, where sometimes English words are still in secondary language content. In these cases I wrap these words with <span lang="en"> and apply corresponding font-family this way:
* [lang="en"]
{
font-family: 'Ropa Sans', helvetica;
}
However, the font-family I use for my secondary language headings and 'Ropa Sans' do not look nice next to each other and they appear as if "not sitting" on the same line. To fix this, I had been using relative positioning on my <span>-s. For example:
h1 span {
position: relative;
top: -2px;
}
This solution worked just fine, before I realized that it messes up with the underline when applied to links. I could avoid using text-decorations on links like these, but I would prefer to know if there is some simple CSS solution that I was not able to identify.
This isn't possible, but you could do something like
a {
display: block;
border-bottom: 1px solid transparent;
text-decoration: none;
}
a:hover {
text-decoration: none;
border-bottom: 1px solid blue;
display: inline-block;
}
This works.
I've setup a demo of my problem at the following url: http://jsfiddle.net/YHHg7/4/
I'm trying to do the following:
legend {
display: block;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
However it seems all browsers ignore the display: block on a legend tag. Is this the correct behaviour for this tag or am I doing something wrong?
<legend> is a block-level element by default, so whether you include display: block there's no difference. However, it's treated specially together with <fieldset> by browsers as a label for a fieldset.
To "detach" it from the <fieldset> you can give it a non-static position, or float it, or even just play a little more with its margins. Results can be a little unpredictable, though, again due to the special treatment of both elements.
IMO the best thing you can do to control legend is just leave it as a semantic fixture only.
CSS:
legend {
display: block;
margin: 0;
border: 0;
padding: 0;
width: 100%;
}
And then use a span inside it to control all of your desired styling:
HTML:
<legend><span>Span to the rescue!</span></legend>
CSS:
legend span {
display: block;
padding: 0 20px;
border-bottom: 1px solid red;
}
Clean, semantic, and generally easily manipulated across different browsers
A legend is a block-level element by default. If I add the width back in using Chrome (Dev channel), the width of the legend is changed appropriately.
If you're instead wondering about the margin style, a legend can only have its left or right margins set, and that would place it relative to the fieldset its's contained in. If you want to add spacing to the other elements, then you would probably want to add padding to the fieldset itself.
Uncomment the width attribute if you want the red line to go all the way across.
legend {
display: block;
border-bottom: 1px solid red;
width:100%;
margin-bottom: 50px;
}