I'm writing the following HTML markup:
<span> Some Text
<div id="ch">татата</div>
</span>
and styles:
span{
border: 1px solid black;
text-align:center;
width: 300px;
height: 300px;
background: aqua;
}
#ch{
width:100px;
height:100px
background: yellow;
}
jsFiddle
Why is the height property not applied to a div element which inside the span, but width is applied?
Why is the right border of my span is missing?
Your markup is incorrect ( plus missing semi-colon as quoted by Steini, mentioning this for sake of completeness of answer )
Answer 1 : span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property!
Answer 2 : add display:block to span to change the default behavior
working fiddle with correct markup
fiddle with the layout you wanted
span display:inline you must set it display:inline-block
but this not standard you must use div span always use for text
your fiddle demo
Because you are missing a semicolon after height: 100px <- this ; is missing in you css file
span is an inline element so it will not take notice of your height and width. For this you need to give it either:
display:block; or display: inline-block
First answer: You forgot the semi-colon after height style, that's why it is not rendered.
Second answer: If you look closely, the border appears after the div. This is because you
are inserting block level element inside inline element. So, block level element takes it to the next line and then it takes the whole line. On the very next line you can see the right border for the span.
It is bad practice to put block level element inside inline element. In fact, I do not see any practical use of this kind of structure. Please, correct it if you are learning.
By default div's is a block element and span is an inline element. Block elements always flow vertically and inline elements always flow next to each other from top left to the bottom right depends on screen width.
We can use inline elements under the block element, not vice versa. If we override we expect to see some issues like this on responsive layout.
span is an inline-element, while div ist not. you should consider swapping them..
Related
Its like few days pass and again when I try to recall what I read about line-height is something misleading what I am seeing
<span>Color me</span>
span {
line-height: 52px;
background: red;
font-size: 14px;
}
Why it does not color complete box (i.e complete line-height)?
But When I do the same with div it colors as required.
<div>Color me</div>
div {
line-height: 52px;
background: red;
font-size: 14px;
}
In this particular case you need to add the following:
span {
display: inline-block;
/* ... */
}
As for the reason why, see this StackOverflow answer.
Since span is an inline element it occupies only the height of the text and it does not cover the full area whereas in div it is a block element so it can cover the full area.
The method to convert the inline element to block element is
span{display: inline-block;}
Because line-height doesn't work on inline element. span is an inline element. You may add display: block or inline block to span's css
On replaced inline elements such as buttons or other input element, line-height has no effect.
For more information, see line-height#Mozilla
The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
The actual answer to this problem while keeping span elements as inline is to use the padding attribute.
https://stackoverflow.com/a/56781081/1011956
I want the width of a div element to be equal to the width of the content inside it, and also (and more importantly) that any content after this div does not start to the right of the div(as though the div was float:left;), but display below the current div.
I know one way is that after this div, I create another empty div and set clear:both;, but in my case that would not be very preferable.
I think that the following may be close to what you need:
The HTML demo code is:
<div>
Some text may be before the element.
<div id="info">This is my bible!</div>And some text may follow. the element.
</div>
And the CSS styles are:
#info {
display:inline;
background-color:#CFFF9F;
color:black;
font-weight:normal;
border:black solid 1px;
}
#info:after {
content:"\A";
white-space: pre;
}
Fiddle reference: http://jsfiddle.net/audetwebdesign/6FNQc/
Explanation of How This Works
Use :after to generate some content (known as a pseudo-element in CSS). The "\A" is interpreted as a line break (linefeed) provided that the white space is preserved, hence you need to set white-space: pre. Finally, the element has to be inline, hence display: inline.
Related References:
CSS to line break before/after a particular `inline-block` item
To learn more about "\A" (linefeed), see:
http://www.w3.org/TR/CSS21/syndata.html#strings
A very simple task in hand.. but my browser is laughing on my face with my futile attempts.
How do I style a div class just around the text
So I am using jinja on backend and my html looks like this
<div class="content">
<pre> {{contents}}</pre>
</div>
and my css is
div.content {
background-color: #add8e6;
}
But what is happening is.. if "content" is half the line.. this styling is running across the whole horizontal line..
I just want to gracefully wrap the color across the text rather than whole horizontal page.
When I try
display: inline;
all the background color vanishes.
Use display:inline-block
div.content {
background-color: #add8e6;
display:inline-block
}
DEMO
Difference between inline and inline-block
inline-block - This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline - This value causes an element to generate one or more inline boxes.
Try this:
div.content * {
background-color: #add8e6;
}
This will apply the style to all the elements within the div block.
I'm looking to clear an inline-block element (in this case an <a> within a <p>) to the next line, without having to set display:block and defining a width.
Here's an example: http://jsfiddle.net/alecrust/zstKf/
Here's the desired result (using display:block and defining a width): http://jsfiddle.net/alecrust/TmwhU/
If you want to avoid setting an explicit width so you can style the background according to the actual length of the text, you can do the following:
Wrap your link:
<p>To stay up to date <span>Follow Us</span></p>
Note that I have added a <span> tag around the link.
Style your wrapper with CSS:
span {
display: inline-block;
width: 100%;
}
Setting the width to 100% forces the wrapper to take up the whole line. Keeping the <a> tag for the link set to inline-block allows it to have padding and a background applied while not having it expand to fit the container's width of 100%.
Forked JSFiddle: http://jsfiddle.net/Cm9kZ/
It's a bit of a kludge, but it will work:
a {
display: inline-block;
padding: 5px 18px;
background-color: #8C4AD5;
text-decoration: none;
position:relative;
top:25px;
left:-30%
}
You'll have to fudge the left position, but that basically puts you back into setting a known value, just like the width issue in your display:block example. Not really any better, just a different approach.
The closest I can get to what I want is using :before to insert a new line before the <a> (Fiddle). This unfortunately doesn't clear it to the next line though.
This only works if you want to line break after the last element in the p.
I've experimented quite a bit and this works for me, in Safari 6:
p.linebreak-after-last-element:after {
content: "";
display: inline-block;
width: 100%;
}
I have not tested this in other browsers, but it's so simple it should work in all browsers supporting display: inline-block.
An empty <div/> after the inline-block element, clears the inline-block.
With the requirements you have, I don't think it's possible.
I was hoping that this would help, but it doesn't because you don't have an element before your link.
You should just change your HTML, for example: http://jsfiddle.net/thirtydot/zstKf/10/
Using the pseudo class :: after you could add content with a clear:both; property to it.
Not tested but should work in theory.
I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.
How can i do this and keep the styles that already have been defined for the footer?
Thanks in advance!
Edit
div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}
As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.
However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:
display:inline-block;
What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).
Could this be the answer you're looking for?
To convert a div to a span, simply add:
.myDiv
{
display: inline;
}
But I'm really not sure that this is the solution you're after.
Quote:
there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer
Solutions:
Remove empty div(s) from HTML
Remove empty div(s) by adding display:none
Reduce height of the div(s)
Reduce margin or padding of the div(s)
Set position:relative; top:-[yourownnumber]px to .footer
Try adding overflow:auto; to your span. Also add display:block;
If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.
Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc.
You still need the body to be contained in a block-level element.
How if add this:
position:relative /*optional*/
float:left;
left:0px;
I always do this before i know to use span when I first learn css I always do to my element content.