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
Related
Imagine that I've been creating a website for 2-3 weeks now and suddenly I decide that I don't like the default black color of all text elements which don't have any CSS applied to them and that I want to change their color to something like #333333 which is a less black black.
Is adding color: #333333; to the body tag the correct way to do it? Could that have any negative effects on other elements that I have custom styling?
CSS prioritises the code lower down, for example, this:
<style>
p {
color: blue;
}
p {
color: green;
}
</style>
<p>Hello</p>
Would result in the color of the paragraph element becoming green.
So to answer your question, anything above your CSS properties for body would be overridden.
Also, id and class attributes take priority over position, so if you wanted to give the elements that you don't want to get changed a class and keep it as black that would work also.
Hope it helped.
I don't think it'll have any negative affects on any elements, however i would just reference the tags specifically to be sure like
p, h1, h2, h3, h4, h5, h6 {
color: #333333
}
But like the comment, give it a try and see how it turns out.
This is enough, as it allows for the color to be 'passed down' through the cascade. Place this at the start of your stylesheet:
body {
color: #333;
}
Avoid using inline styles:
<body style="color: #333"> <!-- Don't to this -->
Inline styles have a different specificity than CSS selectors, and it's a whole chapter in itself. Plus, it's easier to separate concerns and have you layout separate from your stylesheets. And have everything grouped together within your styles.
The most simple way to do so is by CSS the following way:
* {
color: #333333;
}
Changing color in HTML with the style attribute is actually never the best practice.
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.
I am new to HTML, and would like to remove the space between the text which is in a h5 tag, and the select options
HTML
<h5>Text</h5>
<select style="width:180px">
<option value="0" selected="selected">Select option</option>
</select>
The above code has a fair sized gap in between the two elements. I'm not sure what css to use in order to remove the gap.
You may use CSS in order to modify style for h5 tag, for example:
h5 {
margin: 0;
padding: 0;
}
The same goes for option tag if you wish to modify that as well.
From here you can try if you like that result or would you like to modify h5 tag even further (remember, that you can even have negative margin values).
Edit: If you want to add space you need to wrap the select in a and then use the margin-top css property
If you want to remove the gap, use the margin-bottom or padding-bottom css property for the h5.
Edit 2: You might want to use classes instead of directly changing the styles of the base html tags, to prevent unwanted effect in other places of your page.
To remove any gaps you should set the margin and padding of both elements to 0
h5, select {
margin: 0;
padding: 0
}
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 an incredibly simple layout, you can see it here
<html>
<head>
<style>
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
margin: 0;
padding: 0;
}
ul.mm_sortable_items {
list-style: none;
}
ul.mm_sortable_items li {
display:inline-block;
margin: 0;
}
ul.mm_sortable_items a {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="mm_quicksand_container">
<ul class="mm_sortable_items">
<li class="game_filter_1" id="game_8"><img src="images/itg_0.png"/></li>
<li class="game_filter_1" id="game_9"><img src="images/piu.png"/></li>
<li class="game_filter_2" id="game_10"><img src="images/default.png"/></li>
<li class="game_filter_2 game_filter_3" id="game_11"><img src="images/cam-teng.png"/></li>
</ul>
</div>
</body>
</html>
I want the images to be next to each other with no spaces in between. To the best of my knowledge, what I currently have should do it, but instead there are these gaps between the pictures.
How do I get rid of them?
You literally have put spaces between them. If you remove the spaces, the images will come together.
display:inline-block displays elements as if they are inline. In other words, the line breaks between your images is being read as white space.
You can solve this using:
float:left; rather than display:inline; in your CSS
There are workarounds with negative margins, etc. as others have suggested, but this is the usual way to do what you are asking.
Just remove the display:inline-block on your list items and float them instead.
ul.mm_sortable_items li {
float:left;
}
add this css
.mm_sortable_items {
font-size: 0;
}
Due to spaces between your inline block elements (LI). There are several ways to fix it, you can remove the spaces but it will be hard to read. You could also do negative margin on the li but I personally like the font-size 0 since you have no text anyway
You have following
ul.mm_sortable_items li {
display: inline-block;
margin: 0;
}
Just add
float: left;
in ul.mm_sortable_items li.
I would've had the reflex of using a table, which would have a single row and a cell for each image (especially since they are of the same size). Then you could make the size of the cell, using basic CSS the same as the image's one, such that there is no space between them.
I had spaces in my markup to keep it neat. The browser was rendering it as a single space between each image. Whoops.
Add a
float:left;
rule to the
ul.mm_sortable_items li
selector.
You have two options in CSS
Option 1:
ul.mm_sortable_items li {
margin-right:-4px;
your other CSS here...
Option 2:
ul.mm_sortable_items li {
float:left;
your other CSS here...
Float left is probably considered more of the proper way to do it.
Images in HTML are by default inline elements. What this means is that images are considered equivalent to letters in text. So, there is a space between each image equal to the space between letters. To remove the space between images, you need to use this CSS property on the container of the images:
letter-spacing: -4px;
That will get your images to stick together.