I think it's a really simple CSS problem, but I just don't know how to solve it.
Why is there an empty line before <h1>, and how to remove it (without setting margin and line-height if possible)? Thank you!
<style>
.box-green { background-color: #CCC; }
.box-empty { height: 50px; }
</style>
<div class="box-empty box-green"></div>
<div class="box-green">
<h1>There is an empty line before h1, why?</h1>
</div>
Edit:
Result: http://tinkerbin.com/u6eB0PFQ
The break is there because you are using block elements. An empty <div> element will otherwise cause a line break. You can avoid this by putting display:inline-block; in the CSS for the divs.
You can add display: inline to your div to solve this.
See: http://tinkerbin.com/HDmlrG6u
Related
I have code like this
<p><span>On this day,<div class="underline-text">Sunday</div>,we, the undersigned:</span></p>
and my css
.underline-text {
display: inline-block;
border-bottom: 2px solid black;
width: auto;
}
But my problem is when i run this code, is show like this :
On this day,
`Sunday,we, the undersigned:`
What i need is like this :
`On this day,Sunday,we, the undersigned:`
How i do that way????
NOTE : I'm using bootstrap 3.
UPDATE : Works, i was stupid so i'm changing <div> to <span>. Thanks you all for the answer.
Why i got -2 vote??? Wat's wrong with my question??? I just asking simple question, and i kno i'm so stupid cause i'm using inline-block on span. But why i got minus for this???
Make this adjustment:
On this day, <span class="underline-text">Sunday</span>,we, the undersigned:
A div inside a p element is invalid HTML. The paragraph element closes before the div element begins.
Here's how the browser renders your code:
For a complete explanation of this behavior see: https://stackoverflow.com/a/41538733/3597276
<p> or <span> tags can't contain block-level elements inside them. Most browsers will split it into 2 separate paragraphs. Check this answer: https://stackoverflow.com/a/5441670/6424295
Maybe try using a<div> instead of a paragraph and get rid of the <span> tags, as I don't think they're really doing anything.
Yes. It should be like this:
.underline-text {
display:inline-block;
border-bottom: 2px solid black;
width: auto;
}
<div>
<p>
On this day,<span class="underline-text">Sunday</span>,we, the undersigned:
</p>
</div>
I'm not the best at HTML. Essentially I am trying to get the effect of a lot of line breaks, without filling my code with a lot of consecutive <br> tags. What I have in my head is this CSS:
.movedown {
position: relative;
down: 120px;
}
and this HTML, where my text is:
<span class="movedown">*text here*</span>
I only need it on a single page. Anyone know where I'm going wrong?
Assuming you want to inject lots of breaks between two words you can inject a span tag styled as follows:
.long-br {
display: block;
height: 12em; /* 12em is roughly 10 lines at current font size/1.2 line height */
}
<p>Hello <span class="long-br"></span> World</p>
Alternate: if you want to insert lots of breaks between two blocks of text, the ideal way is to use margins:
.long-gap {
margin-top: 12em;
}
<p>Paragraph 1</p>
<p class="long-gap">Paragraph 2</p>
Try this:
.movedown {
position: relative; //Not required
margin-top: 120px;
}
You need to use the CSS property margin-top to add some space without using line breaks.
.movedown {
margin-top: 120px;
}
down is not an existing css rule. What you should be using is a div with margin-top, this creates a space above the element.
.down {
margin-top: 50px;
}
*top text*
<div class="down">*text here*</div>
Instead of 'down' try:
top:120px;
Just use <div> elements instead of <span>.
By default div is a block style element and span is inline.
block occupies the whole row, so each new one will be on a new row.
You can change the default behaviour with CSS but better to get a grip of the basic elements first.
I have two divs declared as,
<div id="icdAid" align="center" ></div>
<div id="errorMsg" align="center" ></div>
How can I add space between them?
You can add this to your CSS
#icdAid
{
margin-bottom:10px;
}
This will add a space of 10px to the bottom of icdAid div.
JSFIDDLE DEMO
In html - use <br/> to add new line.
In css - #icAid{ margin-bottom: 20px; }.
Also align attribute is deprecated, use css for that div{ text-align: center; }
Your should use the CSS solution
#icdAid {
margin-bottom: 15px;
}
This is used if you want the results replicated to wherever you use the icdAid id. But if you want a fix on a single page use <br/> tags in-between the close and open tags of you <div>'s.
With the CSS solution you have more control over the spacing as <br/> tags are a set width.
How can I remove the space between the <fieldset>'s in the following example? Here's a JSFiddle.
HTML
<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>
<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>
CSS
*
{
margin: 0;
padding: 0;
}
fieldset
{
background-color: red;
display: inline-block;
}
I'd like to be able to leave space between the <fieldset>'s in the HTML code, since their contents are quite long. But I need them to display right next to eachother.
The best solution is to remove any spaces between inline-block (or inline) tags.
You can use comments for better readability:
<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>
There is no CSS solution which can be 100% reliable.
EDIT: it doesn't seem it's the case but some template engines provide this behaviour, like twig's spaceless
Demo
How about float: left;:
CSS:
fieldset {
background-color: red;
float: left;
}
A different solution is to put the fieldsets in a DIV container and set the font-size to 0 using CSS for that container. Then, of course, set the font-size of the field-sets back to whatever you need it to.
Setting the font-size to 0 on parent container basically removes the white-space between inline-block elements of that container.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
I have a line of code ( which is to long to be displayed in one line ) to be displayed on a web page in one line, just like above.
I don't it to be wrapped into two lines.
Can I accomplish this only using css?
To actually make this happen when you use words with spaces in between them overflow:auto is not enough, you'll also need text-overflow: nowrap.
http://jsfiddle.net/kZV3j/
Here's how SO's code block looks:
<pre>
<code>
<span>...</span>
</code>
</pre>
And the CSS:
pre {
overflow: auto;
}
Demo: http://jsfiddle.net/TfeLm/
I think you're looking for overflow:auto:
<div style="overflow:auto; width:200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Create a containing element (e.g. a div), then set some basic CSS properties on it that define a width, and handle the overflow. Like this:
HTML
<div class="short">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
CSS:
.short {
width:400px;
padding: 10px;
overflow-x:scroll;
}
jsFiddle example. Works in all modern browsers and IE8.
I think you are looking for the overflow property with a auto value:
<style>pre { width: 200px; overflow: auto; }</style>
<pre><code><p>Some tooooo long text on one line</></code></pre>
Live example: http://jsbin.com/uhuveg/
I believe that you should use the following CSS
#id {
width: 400px;
padding: 5px;
background: #C3C3C3;
overflow-x: scroll
}
See this live example