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.
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Difference between the selectors div + p (plus) and div ~ p (tilde)
(5 answers)
Closed 4 months ago.
I want to remove the bottom margin of a title only in case it has a subtitle next to it.
Probably related to Is there a "previous sibling" selector? but that question does not answer my question.
.title, .subtitle {
border: 1px solid black
}
.title + .subtitle {
background: yellow;
margin-top: 0;
}
<header>
<h3 class="title">My title</h3>
<p class="subtitle">my subtitle: top space NOT OK!</p>
</header>
<p> some text lorep ipsum: top space OK</p>
<header>
<h3 class="title">My title</h3>
<p>my other text: top space OK</p>
</header>
as #blurk suggested .title:has(+ .subtitle) works in most modern (chromium + safari) browsers, + in FF accessible via flags (why people from FF do such a pervert things?)
.title:has(+ .subtitle) {
margin-bottom: 0;
}
.title, .subtitle {
border: 1px solid black
}
.title + .subtitle {
background: yellow;
margin-top: 0;
}
<header>
<h3 class="title">My title</h3>
<p class="subtitle">my subtitle: top space NOT OK!</p>
</header>
<p> some text lorep ipsum: top space OK</p>
<header>
<h3 class="title">My title</h3>
<p>my other text: top space OK</p>
</header>
Not sure that's what you need. Try this?
/*
This is a common technique called a CSS reset.
Different browsers use different default margins, causing sites to look different by margins.
The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.
*/
* {
margin: 0;
padding: 0;
}
/*
The comma groups classes (and applies the same style to them all. Just use the individually).
*/
.title {
margin-bottom: 0;
border: 1px solid black
}
.subtitle {
margin-bottom: 1rem;
background: yellow;
border: 1px solid black
}
p {
margin-bottom: 1rem;
}
While I know you can't write variables like
root: {
--aic: align-items:center;;
}
Is there anyway to get round this, by combining the various parts seperately? The obvious obstical here is the requirement of the colon inside the variable.
i.e.
root: {
--ai: align-items:;
--center: center;
--aic:
var(--ai)
var(--center);
}
.myclass {var(--aic);}
I would suggest you to switch to SCSS and use a #mixin. Read more about it here.
Here's a live demo.
HTML:
<div id="test">TEST</div>
SCSS:
:root {
--text_color: red;
--background_color: gold;
}
#mixin my_mixin {
color: var(--text_color);
background-color: var(--background_color);
}
#test {
#include my_mixin;
}
Based on my comment on your question, you can use classes to achieve something similar. But you can't use custom properties as CSS properties, only values -- it's the same as saying for example margin: margin: var(--customMargin);;
/* Layout unrelated to answer */
div { border: 1px solid black; color: white }
.varText { background-color: red }
.varPad { background-color: blue }
.varText.varPad { background-color: green }
/* Answer */
:root { --size: 1rem }
.varText { font-size: var(--size) }
.varPad { padding: var(--size) }
<div class="varText">
Size Text only to root variable
</div>
<div class="varText" style="--size: 2rem">
Size Text only to inline variable
</div>
<div class="varPad">
Size Padding only to root variable
</div>
<div class="varPad" style="--size: 2rem">
Size Padding only to inline variable
</div>
<div class="varText varPad">
Size Text and Padding to root variable
</div>
<div class="varText varPad" style="--size: 2rem">
Size Text and Padding to inline variable
</div>
I have some div with fixed width containing text in the form 1234 days ago (10/10/1900).
The text must wrap the date part (10/10/1900) ONLY if string is too long to stay on the same line
I tried to add a new line before the date and apply the rule white-space: break-spaces; but all string are wrapped
Any other attempts to use overflow-wrap or word-break doesn't work as I wish
Have you some idea? Below I show my example code
.row {
width: 100%;
display: flex;
flex-direction: row;
}
.footer {
width: 170px;
height: 100px;
margin-left: 20px;
padding: 10px;
white-space: break-spaces;
}
.wrong {
background-color: red;
color: white;
}
.correct {
background-color: blue;
color: white;
}
<div class="row">
<div class="footer wrong">1234 days ago (10/10/1900)</div>
<div class="footer correct">4 days ago (04/05/2050)</div>
</div>
<p class="wrong">The text "(10/10/1900)" must be wrapped<p>
<p class="correct">The text "(04/05/2050)" fits the line so isn't necessary to wrap<p>
Put the dates into span elements with white-space set to pre.
<span style="white-space: pre;">(10/10/1900)</span>
(Note that, if the date is wider than the container's 170px width, it will continue to extend past the box without wrapping.)
Instead of writing "/" use the HTML entity / which should prevent a breakup when pushing the date into the next line.
<div class="row">
<div class="footer wrong">1234 days ago (10/10/1900)</div>
<div class="footer correct">4 days ago (04/05/2050)</div>
</div>
I'm currently writing a page using Angular and have created a dialog window for users to copy columns from an Excel document. This window consists of two large textareas lined up as columns next to each other, which I achieved using css' column-count attribute.
The issue is that when the first textarea is focused, there is a glow around it. The bottom of the glow shows up in the next column above the second textarea. Is there something I can do to fix this?
I don't want to remove the glow because it helps the user know they're focusing on that input. Worst case scenario I'll just keep it as is.
Here's a picture of what it looks like to have the first text area focused.
copy-paste-dialog.component.html
<h1 mat-dialog-title>Copy/Paste Parts From Excel</h1>
<div id="dialogInput" mat-dialog-content>
<div>
<h4>Part Numbers</h4>
<textarea rows="20" class="form-control" placeholder="Part Numbers" [(ngModel)]="result.supplierPNs" ></textarea>
</div>
<div>
<h4>Descriptions</h4>
<textarea rows="20" class="form-control" placeholder="Descriptions" [(ngModel)]="result.descriptions" ></textarea>
</div>
</div>
<div mat-dialog-actions class="dialogButtons" >
<button mat-raised-button color="primary" [mat-dialog-close]="result">Submit</button>
<button mat-raised-button color="warn" (click)="cancel()">Cancel</button>
</div>
copy-paste-dialog.component.css
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
column-count: 2;
}
textarea {
resize: none;
}
if it doesn't matter for you, you can just use flexbox:
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
display: flex;
width: 100%;
margin: 0 -10px;
}
textarea {
resize: none;
}
#dialogInput div {
flex: 1;
margin: 0 10px;
}
display: flex works likes a row, it puts the divs next to each other.
flex: 1 means it will take the remaining space, so by giving both the divs within #dialoginput, it will take the even amount of space, which in this case is 50%.
At last, I added some margin.
Flex-box instead of column-count: 2 will solve this issue
CSS Change
.dialogButtons {
margin: 10px 0;
}
#dialogInput {
display: flex;
}
#dialogInput textarea {
margin-right: 1em;
}
textarea {
resize: none;
}
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;
}