I have this code:
<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>
I think HTML would automatically add 1 line spacing in between them.
I would like them to just go without 1 line of spacing, line by line I mean, not line space line space.
How could I do this without using a <br> element which is definitely unworkable in between the <h1> and <h3>, and probably not a structurally good HTML practice maybe too right?
Is using a CSS bottom margin fix this?
I am sorry to ask such an easy question maybe, I am a still bit new to HTML & CSS, but I am still learning. Thx in advance for all the answers
Default styling, the enemy of consistency
Many elements have default margins applied to them by browsers. The problem is that each browser (Chrome, IE etc) applies different amounts of margin.
This makes it hard to achieve consistency between browsers, and consistency is what we need for effective web-design.
CSS Resets to the rescue
Look into the concept of "CSS Resets". Using this approach, and advisably some prebuilt code like this: https://github.com/murtaugh/HTML5-Reset will RESET these values to zero to give you a level playing field.
Then YOU can decide how much margin your headings will have.
The reset you are looking for here - just for this problem - is:
h1, h2, h3 {
margin: 0px;
}
Then applying your own styles
Then you would build it back up again, like this for example:
h1, h2, h3 {
margin: 0px;
}
h1 {
margin-bottom: 20px;
}
h2, h3 {
margin-bottom: 10px;
}
<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>
The universal reset
A very simple "total" CSS reset would be:
* {
margin:0;
padding:0;
}
But that's not advisable for a number of reasons especially performance: (why) is the CSS star selector considered harmful?
The vertical spacing you see is caused by default top and bottom margins of heading elements. It has nothing to do with line spacing (in the CSS sense). To remove the spacing, set the relevant margins to zero. The details depend on the context and desired effects on margins before and after the sequence of headings (which is questionable structurally here – a 1st level heading immediately followed by two 3rd level headings; maybe you meant the second one to be h2?).
For the given markup, assuming that no other effects are desired, and assuming for simplicity that these are the only h1 and h3 elements, you would set
h1 { margin-bottom: 0; }
h3 { margin-top: 0; }
h1 + h3 { margin-bottom: 0; }
h1, h3 {
margin:0;
}
This will help
Headings have a margin by default, so yes, you should use CSS to remove the margins.
Related
In Bootstrap 4, there is unwanted space around the top and bottom of text, even after applying margin or padding to 0, or playing around the line-height. The extra space is still there. It makes aligning elements with text increasingly harder.
See the red line in the following example taken from Bootstrap official doc:
you most likely will need to use the !important flag at the end of css rule.
For example:
h1 { padding: 0 !important; }
It's not the prettiest and probably not the most efficient method, but it usually gets around the bootstrap css rules.
The extra space is not related to the h1 heading. It is applied through the css selector .bd-content>table>tbody>tr>td .
You can try :
.bd-content>table>tbody>tr>td {
padding: 0;
}
Use lesser line-height like
h1, h2, h3, h4, h5, h6{
line-height:0.6;
}
This should work as per your requirement or else change the number 0.6... or so
I realize the question has been asked several times over, but frankly I didn't manage to find an actual answer in any of the instances.
Whatever I try I cannot get rid of the spaces between divs? here is a simplified version of the problem, and a jsfiddle: http://jsfiddle.net/hhLopqwm/1/ . Any ideas? How can I make the divs connect?
<div class="top">
so what <br><br> is going on here
</div>
<div id="work">
<h2>no margins control this space between divs</h2>
<h4>it's like magic or something</h4>
</div>
<div class="red">
any clue what should I do?
</div>
Heading elements (in your example <h2> and <h4>) have margins too which push the parent divs apart:
div, h2, h4 {
margin:0;
padding:0;
}
html {
margin: 0;
padding: 0;
}
.top {
background-color:yellow;
text-align: center;
margin: 0;
padding:0;
}
#work {
background-color:green;
margin:0;
padding:0;
text-align: center;
}
div, h2, h4 {
margin:0;
padding:0;
}
.red {
text-align: center;
background-color:red;
}
<div class="top">so what the hell
<br>
<br>is going on here</div>
<div id="work">
<h2>no margins control this space between divs</h2>
<h4>it's like magic or something</h4>
</div>
<div class="red">any clue what should I do?</div>
Check this link:
How to remove the gap between div in html?
Use
* {
padding: 0px;
margin: 0px
}
at the top of your CSS
H2, H4 {margin: 0;} will fix it, as mentioned previously its the margin on those.
You could also use padding to push the div out the appropriate amount, or a min-height to resolve the issue.
Personnally I would probably just remove the margin from all H1/2/3/4/5/6.
I wouldnt even use a reset since typically this adds more CSS than its worth.
My standard reset would be html, body, H1, h2, h3, h4, h5 {margin:0; padding:0;}
Please DO NOT use: * {margin: 0; padding 0;}
This is generally bad practice and can and will break some forms etc, google it if you want further information.
Heres some of the cons:
http://www.cssreset.com/scripts/universal-selector-css-reset/
•No control over exactly which elements are reset – every element used in the document must now have its margin and padding set explicity, plus any other properties such as border and outline that may be included in the reset (see the extended version below).
•Wave goodbye to inheritance of CSS rules from parent to child elements – the universal selector wins out every time (see note on inheritance, below). So not only must every element be defined after the reset, but child elements now cannot inherit each element’s properties, and so they must also be explicitly defined. The amount of code this requires may even negate the size-savings from the minimal CSS Reset!
•According to the universal declaration, a browser must run through every element on the page and apply the universal rule: elements, their children and great-great-great-grandchildren all alike, and some claim that this may be a huge hit on resources and page load times (this point is debatable for modern browsers.)
•Also – and this might be the deal-breaker for many – Internet Explorer 6 and 7 don’t support the universal selector.
I have a problem thats kinda driving me nuts. I have an article container and within are several paragraphs. The first paragraph contains a drop cap. This first paragraph does not use text-indent, however every following paragraph does.
When I begin a new paragraph following a h3-header, I don't want any text-indent. Fine, I can get this to work (blue text in example).
My problem is this, when I begin a new paragraph with a header (strong followed by a break), this line will use the text-indent of the paragraph, and I don't want it to. I must have the strong tags inside the paragraph (as one should), not outside.
I'm thinking of a way to select all paragraphs that start with a strong tag. I don't want to use any javascript to solve this. I want to change the text-indent of the paragraph, not the position of the strong text.
I've made a jsFiddle here. I have tried something like this:
p>strong {
color:#f0f;
text-indent: 0 !important;
}
You can add a negative margin to the strong tag, though I assume you'll want a specific class on it.
strong.subhead {
margin-left: -3em;
}
Working example at: http://jsfiddle.net/J5C86/2/
However, this is also assuming you don't want the paragraph associated with the strong tag indented. If you're looking for the paragraph under the subheading to be indented as well, you'll need another tag on the first word or letter after the br.
span.subhead-indent {
margin-left: 3em;
}
Example: http://jsfiddle.net/J5C86/4/
To expand on my comment on your question:
If there's a reason you can't use <h4> - which would be the more suitable tag here - you can simply add a negative margin to your <strong> element:
p > strong:first-child {
margin-left:-3em;
}
JSFiddle example.
Otherwise, use <h4> instead:
<h4>Strong sub header</h4>
<p>Aliquam semper placerat urna...</p>
h3+p, h4+p {
text-indent:0;
margin-top: 0;
padding-top: 0;
}
h3+p {
color:#00f;
}
JSFiddle example with <h4>.
It works for me. Use this:
p>strong {
text-indent: 0 !important;
color: #f0f;
display: block;
}
After doing this, Remove the br tag at the last of p>strong.
Demo
I saw your problem and found that you have not included your paragraph within the h3 tag, so define your css with your strong paragraph with a class for eg.
<p class="no-indent"><strong>Strong Sub Header</strong></p>
define your css this must work.
My Drupal theme generates:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
The results is that Field 2 has another style.
How can I remove the effects of h3 using CSS?
Better way - remove h3 tag. But sometimes, when you need to reset all styles of parent element - use global attributes, like "font" for "font-size", "font-style" and so on...
Warning of inheriting paddings, margins borders and background styles - this can be look ugly. For example, when your element has padding and border wiil duplicates for each element:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
http://jsfiddle.net/iegik/q72EM/
you can access the h3 as follows:
.field2 h3{ //style here }
This will change the style of any h3 inside an element with a class of field2. If you want to be extra specific:
div.field2 > h3 { //style here }
This will only change the style of an h3 element that is a first level descendant of a div with a class of field2. I would recommend you look into css selectors.
To remove any existing effects, you would have to overwrite them. This can be done by just setting the values back to the default for the element.
You can only "remove" the effects by setting properties to whatever value they had before the styles for <h3> get applied. For example you can reset the font size with
.field > h3 {
font-size: medium;
}
You will need to do this for all properties that get modified by your CSS or the browser's internal stylesheet, but there's help to be had: modern development tools (e.g. Chrome's) will allow you to inspect an element and show you what properties it has and where they came from (so you can see that font-size has been modified). Looking at the appropriate CSS standards will show you what the default value is for each of these properties (e.g. font-size is here).
you can easily edit like this :-
CSS
.field2 h3 {
color:red;
font-size:12px;
font-family:arial;
}
DEMO
Used to this
as like this
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3 element, the properties that are probably set in browser default style sheets are display, unicode-bidi, font-size, font-weight, margin, and page-break-after. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.
I'm using a template and the titles are inside a div. I want to apply h1 to the title but it goes bad (the div is styled with css, and there is no styling for h1)
Normally this is what it is:
<div class="content-pagetitle">Title</div>
I'm changing to:
<div class="content-pagetitle"><h1>Title</h1></div>
But it goes bad.
I tryed to use the same styling content-pagetitle for h1. It didn't worked
<h1>Title</h1>
(It does not become same as content-pagetitle)
Is there a css code that says "do not apply any styling to h1"?
Might try removing margins and padding on the H1
h1 { margin:0; padding:0 }
I would encourage you to explore you dom (via firebug or any equivalent) and see which styles are being applied to the H1. You may need a more specified selector to apply the aforementioned rules to a particular h1 element only.
Browsers have default styles that attempt to reasonably display a valid HTML document, even when it has no accompanying css. This generally means that h1 elements will get extra padding, a large font size, bold font-weight, etc.
One way to deal with these is to use a reset stylesheet. That may be overkill here, so you might just want to use firebug or something to identify the specific styles you want to kill, and override them.
If you're having trouble getting your styles to override, stack more selectors to add more specificity.
Is there a css code to say "do not apply any styling to h1"?
Not as such, no. But...
What you could do is specify 'inherit' as the value of the h1's attributes. This is unlikely to work in all situations, though. Assuming:
div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}
h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}
It might be possible to increase the specificity of the selector, by using:
div#content-pagetitle > h1
or
div#content-pagetitle > h1#element_id_name
I know this is an old post, but here is what I would do...
define all your h tags as usual, then for the specific style, do something like
<h1 class="specialH1"> ... </h1>
and in your css
h1.specialH1 (
/* style attributes */
)
I think thats a clean solution, and gives you full control, whilst not having to alter or reset your default h tags.
It also avoids using any selector increasing type black magic witchcraft xD
Anyways... Just my opinion... Hope this helps anybody