This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I am working on a project that needs an aligned letter grid. It must be peppered with tags so i can mess with individual words using css classes.
This is what i've tried so far:
#import 'https://fonts.googleapis.com/css?family=Fira+Mono';
.clockContainer {
margin: auto;
color: black;
letter-spacing: 5px;
}
.clockLetter {
font-family: 'Fira Mono', monospace;
display: inline-block;
margin: 0;
padding: 0;
}
.clockLetter::after {
display: none;
margin: 0;
padding: 0;
}
.clockLetter::before {
display: none;
margin: 0;
padding: 0;
}
<div class="clockContainer">
<!-- First row -->
<div class="clockLetter" id="clockIts">ITS</div>
<div class="clockLetter" id="clockIgnore">Z</div>
<div class="clockLetter" id="clockA">A</div>
<div class="clockLetter" id="clockIgnore">T</div>
<div class="clockLetter" id="clockHalf">HALF</div>
<div class="clockLetter" id="clockIgnore">B</div>
<br/>
<!-- Second row -->
<div class="clockLetter" id="clockIgnore">IP</div>
<div class="clockLetter" id="clockTen">TEN</div>
<div class="clockLetter" id="clockQuarter">QUARTER</div>
<br/>
</div>
Look at how the letters line up until a div is closed then a weird unsolicited blank space appears, ruining the alignment. How can i prevent/remove that?
I am already using a monospaced font so that's not the problem.
EDIT:
I've managed to circumvent the problem by wrapping the rows in a .clockRow element and adding this css rule:
.clockRow>.clockLetter:not(:nth-child(1)) {
margin-left: -9px;
}
It's not an optimal solution so i am still open to better answers.
(Took a page out of CSSTricks' book: https://css-tricks.com/fighting-the-space-between-inline-block-elements/)
use below code and adjust your spacing..
letter-spacing: 0 px;
Change your letter spacing in css as below
.clockLetter {
letter-spacing: 0.01em;
}
Related
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
How wide is the default `<body>` margin?
(4 answers)
Closed 1 year ago.
i am trying to place a title above some words but my title has a white space underneath, my css is
.title{
grid-template-areas:"image" "title"
}
.title_word{
grid-area: title;
}
.title_img{
grid-area: img;
}
<div class="title">
<p class="title_word">hello</p>
<img src="https://live.staticflickr.com/5549/10549969363_76ccf43946_b.jpg" alt="not working" class="title_img">
</div>
as you can see, this works but in firefox and chrome it is giving me lots of white space
Adding margin-bottom: 0 to the title class will do the job. the reason for that is because margins are used to create space around elements, outside of the defined borders so setting it to 0 will eliminate that extra gap.
the <p> tag has a default css property of margin-block-end: 1em; which is causing that extra gap you see.
.title{
grid-template-areas:"image" "title"
}
.title_word{
grid-area: title;
margin-bottom: 0;
}
.title_img{
grid-area: img;
}
<div class="title">
<p class="title_word">hello</p>
<img src="https://live.staticflickr.com/5549/10549969363_76ccf43946_b.jpg" alt="not working" class="title_img">
</div>
Before I start tinkering with CSS - I add an * selector, which removes default margins and padding.
* {
margin: 0;
padding: 0;
}
.title{
grid-template-areas:"image" "title"
}
.title_word{
grid-area: title;
}
.title_img{
grid-area: img;
}
<div class="title">
<p class="title_word">hello</p>
<img src="https://live.staticflickr.com/5549/10549969363_76ccf43946_b.jpg" alt="not working" class="title_img">
</div>
If you want to delete the whitespace underneath add:
margin-bottom: 0;
to your
.title
In the end it should look like this.
.title {
grid-template-areas:"image" "title"
margin-bottom: 0;
}
This is likely because of the margin that html things tend to have. try a margin: 0; or a margin-bottom: 0; if that doesn't work, try the same with the border: 0; and padding: 0; as that's what makes up the whole block.
I am working on a react project, and I list some operations ( objects ) in a Table, everything looks fine but the client for something I found very weird and hard, here is how it looks :
But that is not how he wanted the datatable dates looks, he wants something like this :
Is there a CSS property that can make that possible ?
Any help would be much appreciated.
there is too much code to write, but those parts are enough :
HTML :
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">04/07/2018</span>
</div>
SASS :
.co-operations-contrat {
&__date {
a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
+.co-operations-contrat__date-text {
margin-left: 0;
}
}
&-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
}
}
Like others have said monospace for the dates would be best. If you can't change the font are you able to wrap each part of the date?
If so what you could do is something like this;
https://jsfiddle.net/8mLwot25/3/
Basically, I've set a width on each span and aligned them with flex on the parent container. (You could also float each span). But by doing this would align the items in a better way.
It's not perfect but its a solution.
.container {
display: flex;
}
.container span {
text-align: center;
width: 20px;
}
.container span:last-child {
width: auto;
}
<div class="container">
<span>01</span>/
<span>04</span>/
<span>2019</span>
</div>
<div class="container">
<span>01</span>/
<span>05</span>/
<span>2018</span>
</div>
<div class="container">
<span>13</span>/
<span>04</span>/
<span>2019</span>
</div>
Maybe letter-spacing can help you with that. I'm not sure if you can achieve a pixel perfect result with that but this property may be usefull.
The issue is related to the Poppins font you are using for these dates. The font is not monospaced (it is sans-serif only).
If using a regular monospace font, the issue no longer appears
See demo below
.co-operations-contrat__date a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
}
.co-operations-contrat__date .co-operations-contrat__date-text {
margin-left: 0;
}
.co-operations-contrat__date-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
#no-poppins .co-operations-contrat__date-text {
margin-left: 25px;
font-family: monospace;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<h2>Poppins In</h2>
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h2>Poppins Out</h2>
<div id="no-poppins" class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h1>Other workarounds include </h1>
<h2>Usign <TT></h2>
<div class="co-operations-contrat__date">
<tt>30/06/2018</tt><br/>
<tt>31/03/2018</tt><br/>
<tt>04/07/2018</tt><br/>
<tt>31/01/2011</tt><br/>
</div>
<h2>Using <PRE></h2>
<div class="co-operations-contrat__date">
<span>30/06/2018</pre>
<pre>31/03/2018</pre>
<pre>04/07/2018</pre>
<pre>31/01/2011</pre>
</div>
Of course, you can choose any monospaced font of your choosing, I just went the browser's defaults for the demo.
I'm trying to implement font-size scaling based on width of container (I want my long h1 to be in one line).
Here is my HTML with bootstrap 3:
<div class="someclass">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="responsive-headline">LONG TEXT IS
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</h1>
<ul class="breadcrumbs">
...
</ul>
</div>
</div>
</div>
</div>
CSS styles:
.responsive-headline {
margin: 0px 0px 3px;
color: #fff;
text-transform: uppercase;
font-size: 32px;
letter-spacing: 1.7px;
line-height: 1.4;
}
Ok. Let's start from FitText.js library:
jQuery(document).ready(function($) {
$('.responsive-headline').fitText();
});
Result font-size: 114px;! What?
Add some parameters:
$('h1.responsive-headline').fitText(1.2, { minFontSize: '18px',
maxFontSize: '32px' });
Result font-size: 32px;. Better but not what I want, I need smaller font-size. Also tried to add width: 1000px; display: block; white-space: nowrap; to h1 without success.
Second library that I tried is FlowType.js. Add some code:
jQuery(document).ready(function($) {
$('h1.responsive-headline').flowtype();
});
Result font-size: 32.5714px;. Little bigger than default.
And with parameters:
$('h1.responsive-headline').flowtype({
minFont : 12,
maxFont : 32
});
Result font-size: 32px;.
Why my h1 becomes bigger but not smaller?
Might it be because you are calculating the font-size on (document).ready?
If you're looking for a more dynamic sizing "responsive", maybe try the resize() method?
https://api.jquery.com/resize/
My appologies if im misunderstanding.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
As you can see the text is not properly aligned.
I want the text to be displayed like these and it should be justified also:
Ethics/Moral:Respect for mankind,the environment and fglll
nature without exceptionRespect for mankind,the
environment and nature without exception
The next line should start at the same point as the previous line.
How can I do it in css
#MuFFes mentioned the css properties text-indent, but I prefer to use dl, dt, and dd elements.
dt {
float: left;
clear: left;
width: 100px;
text-align: right;
font-weight: bold;
}
dt:after {
content: ":";
}
dd {
margin: 0 0 0 110px;
padding: 0 0 0.5em 0;
}
<dl>
<dt>Ethics/Moral</dt>
<dd>Respect for mankind, the environment and nature without exception.</dd>
<dt>Honesty</dt>
<dd>Treating everyone with sincerity and integrity.</dd>
<dt>Quality/Safety</dt>
<dd>Mankind and the environment, the product and its utilization -achieving the optimum together.</dd>
</dl>
By using flex you can do like this
Note, the br I added is merely there to show how it behaves when breaking line
.row {
display: flex;
}
.row ~ .row {
margin-top: 5px;
}
.row div:first-child {
color: steelblue
}
<div class="row">
<div>
Ethics/Moral:
</div>
<div>
Respect for mankind, the environment and<br>nature - without exception
</div>
</div>
<div class="row">
<div>
Honesty:
</div>
<div>
Treating everyone with sincerity and<br>integrity
</div>
</div>
and if you need 2 even columns and have dynamic content, use display: table-row/table-cell
.row {
display: table-row;
}
.row div {
display: table-cell;
}
.row ~ .row div {
border-top: 10px solid transparent;
}
.row div:first-child {
color: steelblue
}
<div class="row">
<div>
Ethics/Moral:
</div>
<div>
Respect for mankind, the environment and<br>nature - without exception
</div>
</div>
<div class="row">
<div>
Honesty:
</div>
<div>
Treating everyone with sincerity and<br>integrity
</div>
</div>
Side note:
As Paulie D very well pointed out, dl/dt/dd is likely the most semantically appropriate markup, though my suggested styling might give you the wanted result. Feel free to combine the two
I think that using ::first-line pseudoelement is the best you can do in that case. Try:
::first-line {
text-indent: -40px;
}
You have to adjust text-indent by yourself.
It would be also a little bit easier with the sample of your code.
this is my first post here on StackOverflow and I'm quite excited about it since Google has brought me here quite often in the search of comprehensive answers.
Anyways, my question is quite simple but I can't seem to figure it out. I am trying to align three small icons on the same line but to the right of my page/post title. The post heading code looks like this:
<div class="post-heading">
<h1>Title</h1>
</div>
The 3 icons need to have their own ID in order to function properly. They are inserted like this:
`#icon_container {
position: relative;
margin: 0;
padding: 0;
line-height: normal;
font-size: medium;
width: 50px;}
`#icon_container #icon_1 {
float: right;
background-image: url(icon.png);
background-repeat: no-repeat;}`
`#icon_container #icon_1 A {
width: 24px;
height: 24px;
display: block;}`
So all I am trying to achieve here is to have the h1 title to the left, and on the same alignmnet to the right the 3 icons inserted with the above CSS. Can anyone help me out? I'd appreciate it a lot :)
Thanks all
EDIT
I forgot to mention the HTML code for the icons; here it is:
<div id="icon_container"><div id="icon_1"></div><div id="icon_2....</div><div style="clear:both"></div></div>
The h1 and the images needs to have the
style="display:inline"
if you want the images to have the same horizontal alignment.
you need to float post-heading and the icon elements to the left.
<div class="post-heading" > < h1 >Title < /h1 > < /div>
<div id='icon_container'>
<div id='icon_1'></div>
<div id='icon_2'></div>
</div>
#icon_container, #icon_1, #icon_2, .post_heading {float:left;}
Try floating your #post-heading h1 to the left:
#post-heading h1 {
float: left;
}
You have two options.
Fist one is
<div class="post-heading">
<h1>Title</h1>
<span class="icon_container"> [icon] </span>
</div>
.post-heading *{
display:inline;
}
Example
2nd is
.post_heading h1{float:left;}
Example