I have following code to place an image as an anchor, this is the skeleton code:
<html>
<div id="outer">
<div id="facebookButton">
</div>
</div>
</html>
in the CSS:
#facebookButton a{
width:20px;
height:20px;
display:block;
/*place code to load image*/
}
what is purpose of the display property setting to block here? what are the benefits?
display property controls how the element is displayed on the page. It has several values, but the most commonly used ones are:
inline Displays an element as an inline (like <span>).
block Displays an element as a block element (like <div>).
none Hides the element.
In your case, <a> is an inline element, so it's displayed among the text surrounding it:
<p>This is a link within text.</p>
But by changing its display property to block, it will be displayed like a div (a block that is separated from the text surrounding it) and you can control its height and width:
<p>This is a link within text.</p>
Related
I have a div with font size of 88 and line height of 88. The text inside the div has a height taller than 88. Why is this?
<div style="font-size:88px;line-height:88px;">I need <span sytle="color:red;">videos</span></div>
If you open up the element inspector and highlight the parent div, it is 88px tall. However if you highlight the text "I need" and the nested span, the height is 101px. This remains true even if you set the line-height on the span itself:
<div style="font-size:88px;line-height:88px;">
I need <span style="font-size:88px;line-height:88px;color:red;">videos</span>
</div>
See attached repl: https://repl.it/#teeej/ReliablePunctualRam
<span> is, by default, an inline element.
If you expect it to behave like an inline block element, you have to give it a display value of inline-block and it will have a height of exactly 88px:
div > span {
display: inline-block;
background-color: rgba(255,0,0,.1);
}
<div style="font-size:88px;line-height:88px;">
I need <span style="font-size:88px;line-height:88px;">videos</span>
</div>
For a better understanding of the implications of display property, I recommend the Candidate Recommendation. And here's the current (official) Recommendation.
I try to created multicolumn menu here (updated link is HERE):
I made used of display: inline-block strategy to make (horizontal) rows. And seems it works.
But it stops work when I wrapped it into the span which comes with position:relative.
<section>
<button>123</button>
<button>123</button>
<span class="dropdown">
* <!-- this is a link that should be inline with buttons -->
<div class="menu">
<div class="row">
<ul>
<li>11111111111111111111111111</li>
<li>1111111111111</li>
<li>111</li>
</ul>
</div>
<div class="row">
<ul>
<li>2222222222</li>
<li>222222222222222222222</li>
</ul>
</div>
<div class="row">
<ul>
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</div>
</div>
</span>
</section>
The href link in the span represents a button or link where I would click to make menu appeared.
I have to have position relative in the span to make menu appears on right place, relatively to it.
(all buttons and link should be on the same horizontal line)
Question: how to make it working?
It works though if I change span to div and make fixed size for it like width:600px (and this width have be more or less of the menu width to make it work like expected, which is weird), but/so I want it to be span (with no specific/hard-coded width).
UPDATE:
I've updated my example to show how it works with span as block and buttons: http://jsfiddle.net/uz0do787/32/
Just put a little more detail that was not shown on previous demo, to show what I want.
I want all buttons and the href link be on the same line, but making span "display:block" breaks that order.
Simply add display:block to span
see DEMO
See why you need to add display:block
The HTML <span> element is a generic inline container for phrasing
content, which does not inherently represent anything. It can be used
to group elements for styling purposes (using the class or id
attributes), or because they share attribute values, such as lang. It
should be used only when no other semantic element is appropriate.
<span> is very much like a element, but <div> is a block-level
element whereas a <span> is an inline element.
Source:Mozilla Developer Network
Do you mean something like this?: Fiddle
.dropdown {
position:relative;
display: block;
padding: 10px;
}
a {
position:absolute;
top: -15px;
left: 100px;
}
Span - this is an inline element. You can't wrap block with inline element. To make it work with span, add "display: block;" property to the .dropdown
Like:
.dropdown {
position:relative;
display: block;
}
I guess If fixed it by switching to display:table then I can stay with span not trying to make it block and it does not jump then to the next line:
Before:
http://jsfiddle.net/uz0do787/32/
After
http://jsfiddle.net/uz0do787/34/
But in any case, I think there is a room for re-factoring - the menu should be independent to show itself by js by x,y depending on the span/link location so that the DOM not to be so dependable on each other and not to be so fragile.
And I just do not understand, why when I apply "display:table" (on that solution/answer I proposed) span stays on place with buttons, but with "display:inline-block" the span breaks the menu layout. What makes display:table works like expected comparing to inline-block solution.
So my issue is as follows.
I have a div that contains both an image and a div (which contains text). The text contains a title and additional content, separated by a line break. See below or my attached codepen for an example.
<div class="outer">
<img src="something.com/pic.png">
<div class="inner">
Title<br>Additional text.
</div>
</div>
Here is my code pen
When I apply display styling of inline to the inner div, the title is inline with the bottom of the image and the text following the linebreak is below the image. Furthermore, if I wrap the text in paragraph tags, all of the text is below the image.
I would like the title to appear at the top and to the right of the image, and all content of the inner div to remain at that alignment, even if the text extends past the height of the image. Furthermore, in the future I will be adding a div with an additional image and more text inside the inner div beneath the text that is already present, and I wish for that content to maintain the same alignment.
Here is my end goal:
And my desired html structure:
<div>
<img>
<!--Start right indent (from top right of image) -->
<div>
<p>Title<br>text</p>
<div>
<img>
<div>
<p>Title<br>text</p>
</div>
</div>
</div>
<!--End right indent -->
</div>
It appears I have found the solution.
.post img{
display:inline-block;
vertical-align: top;
}
.post_content{
display:inline-block;
width: 90%;
}
My codepen: Code pen
I am trying to adjust vertical space between two span elements inside a div. I am trying to achieve half of what I am getting from <br/>.
line-height , vertical-align or margin-top.
None of it worked for me. Here is the jsfiddle
<span> elements are inline. You can't put block-level elements like <p> inside of inline elements.
Use <div>s instead of <span>s and your CSS will work just fine:
<div class="signupEmailBox">
<div class="tag"><p>test data goes here</p></div>
<div class="smallTextEmail">
<p>blah blah blah</p>
<p>some text goes here...</p>
<p>here some more text data</p>
<p>some more text</p>
</div>
</div>
There is a property named display affecting the application of margin among others. The value of this property defaults to inline for span elements. Therefore there is no margin applied.
Either use a element with another default value like a div box or change the value of the display property of your span elements. I suggest using inline-block because this preserves the text flow capabilities of the span element.
span
{
display:inline-block;
}
I have an image that is floated to the left and then some text to the right of the image. However the text is just long enough that one line of a paragraph goes below the image. How to I keep this text inline with the paragraph and keep it from wrapping around the picture?
If you don't want to worry about knowing and setting any widths, you can do this by establishing a new block formatting context for the text container.
i.e. For the markup:
<img src="image.jpg">
<p>Some text
all you need do is give the <p> element an overflow other than "visible". For example:
p { overflow:auto; }
Use a little bit of margin-right on the <img> to separate the text from the image.
If your image is floated to the left, the trick is to have a margin-left of at least the width of the image for whatever element your text is contained in.
For example, if your HTML is something like:
<img src="image.jpg">
<p>Some text
And the width of your image is 160px, you have to give your paragraph a margin-left of at least 160px (it does look nicer if you give it margin-left that's slightly bigger than 160px).
That's all you need to do after you have floated the image, just set the margin-left on the paragraph following it. You don't even need to specify a width for the paragraph.
Demo http://dabblet.com/gist/2791183
You need to the float the image element and the text element separately. I think you also need to specify width for both elements.
<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>
If you do not place your text in another block element, then it will always wrap around that other floated element. The way floats work is it takes an element out of the "document flow", here's some more specific information on how floats work. The only way to get your text to not wrap is to also place it inside of a block element (like a div tag) and float that element with the floated image to the left.
Example:
<div style="overflow: auto;">
<img src="hello.jpg" style="float: left; width: 200px;">
<div style="float: left; width: 700px;">
Hello!!!
</div>
</div>
The first overflow: auto will declare a height for the container. It's the same concept as adding clear: both in a div tag underneath the image and text div. Remember to always clear your floats! :)