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;
}
Related
I'm trying to get a layout similar to this one below:
The problem is that I can't seem to get the headline to not wrap but the paragraph to wrap. Here's what I've tried so far:
Floating. I've floated the image right, but that wraps everything. Tried floating the text left, that didn't seem to fix the issue. Tried white-space nowrap, this was very close, only I couldn't set a width at all to the headline so it just fell off the page.
Fixed paragraph width. Setting a fixed width to the paragraph doesn't work because I need it to wrap below the image. I also can't do to paragraphs, as I need this to be responsive and not have a gap between the two paragraphs as the text expands horiztonally to fill more space.
Contenteditable = true. I used a combination of an empty container set to the size of the image and to float and contenteditable = "true" on the paragraph. This by far got me to the closest outcome, although I ended up in trouble because I have a series of about 4 blocks of these on a page, each with a different amount of content. This meant that placing the float container directly over the image is nearly impossible. To keep the wrap, as well, I can't set the container to position: absolute. Also, the container has to be directly next to the paragraph to work, which makes positioning that much more challenging.
I think I either need a solution to get that container div to always be in the exact same place as the image, or a solution to wrap the paragraph but not the header. I'm open to any and all solutions at this point. Here's a sample of what the DOM looks like for each one of these sets:
<div class="box"> <!-- container for the chunk -->
<img src="" />
<div class="box-txt"> <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div> <!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap.</p>
</div>
</div>
You simply have to position the floated element directly before the text block, after the header (as you already did in your code example). Then a float: right; will work the way you describe it:
.box {
width: 600px;
}
.imgblock {
width: 300px;
height: 300px;
background: #ddd;
float: right;
}
<div class="box">
<!-- container for the chunk -->
<img src="" />
<div class="box-txt">
<!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div>
<!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need
to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph
that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap.</p>
</div>
</div>
I recently started to use CSS grid.
I need to set an empty div element as one of the grid elements so that I can insert contents by javascript when needed.
The problem is that gap is applied to this element which is empty and height: 0. How can I avoid to apply gap only when the element is empty for CSS grid.
<div class="container"> <!-- gap: 20px; -->
<div class="grid-element--1">
<h2>title</h2>
<p>Text Text Text Text Text Text Text Text Text Text </p>
</div>
<div class="grid-element--2">
<h2>title</h2>
<p>Text Text Text Text Text Text Text Text Text Text </p>
</div>
<div class="grid-element--3"></div> <!-- Need to appliy gap: 20px only when this element is not empty -->
<div class="grid-element--4">
<h2>title</h2>
<p>Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
The gap property is applied to the container. You can not set a specific gap for the children div, because it is a property of its parent.
What I would advise is to set your empty div, with the display:none property. And once you inject content to it with javascript, set its display to "block", "flex", or whatever display property it is using when visible.
Another solution would be to replace "gap" with margin or padding bottom on the children. And since this is a property of the children components, you will be able to make individual exceptions.
I have been searching all over for a way to make my <br> tag display less whitespace between the two lines it is separating.
I have some text with a text-input and beneath that I want to have an image. The <br> tag makes too large of a gap, but without the <br> tag the image appears on the line with the text. Note that the <br> makes the perfect size gap for the rest of the elements in the div.
<div>
...<!--Some other text and text inputs-->
<br>Some stuff: <input type="text">
<br><!--I need this br to be a smaller gap-->
<img id="plus" src="plus.png" height="30px" width="30px">
</div>
So my question is how do I make that distance smaller?
What I've tried
Now I have tried a lot of things! Some of these include editing the br in CSS like
br {
display: block;
margin: 1px 0;
line-height:1px;
content: " ";
}
or a combination of those attributes, but no matter which ones I use the minimum height it gets the space down to is the same as the default <br>. It works well for increasing the <br> space, though.src
I tried putting the <br> tag inside of a <div>, but when that <div> is inside my other <div>, it immediately makes a gap that is the same height as a default <br> (even if I don't have a <br> inside my new <div>). Setting the line-height of the new <div> doesn't affect this either.src
<div style="line-height:0px;">
<br>
</div>
I tried using a <hr> with the visibility: hidden, but that made the gap larger than the <br>.src
I tried many, many, different variations of putting <div>s within <div>s and setting the line-height, but no matter what I get to it ends up not affecting the space between the text-area and the image without messing up everything else in the original <div>.
Use <p> html elements instead of breaks.
<p>some stuff</p>
<p>some other stuff</p>
EDIT: With CSS:
p {line-height:5px;}
Remove br tag, here you can do whatever you want to do with image.
#plus{
//use css properties to play with image
}
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>
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! :)