[SOLVED] Major Issue: How do I fix space between text and orange block?

HTML & CSS
,
1

Look: https://testblog567895.blogspot.com/

http://codepen.io/dszdasdsa/pen/yJgXyQ

2

There is nothing abnormal about or wrong with the line-height.

Are you actually complaining about the amount of space between the word “radio” and the “control box” below it?

If so, that space exists because <h3> still has its default vertical margins.
To remove the default margins, assign:

h3 {margin:0}

Try to use appropriate terminology when describing issues. Line-height is a specific property, vertical space between [which] items is more accurate in this case. If you will take a basic course in HTML and CSS, you will be a dynamite coder. You have the energy for it. :slight_smile:

3

Between the text and the orange block?

4

You don’t assign margin:0 to one of the items in css?

5

Yes, you type

h3 {margin:0}

in your CSS. That will target all of the <h3> tags on the page.

6

I can do the same thing with font weight instead of posting twice.

h3 {margin:0}
h3 {font-weight: bold}
7

Absolutely, yes!

8

or I can do it like this, which way?

h3 {margin:0; font-weight: bold}

9 
h3 {
    font-weight:bold;
    margin:0;
}

is the way the rule should be written. Styles grouped with the target selector.

1 Like
10

ok, thanks.

11

Now I have to figure out how to center this in the middle.

https://testblog567895.blogspot.com/

12

justify-content:middle; doesn’t seem to be working

13

I just removed: This code from items 1 & 2 and added them to h3 cause they’re both the same.

color: #0059dd;
line-height:1;
font-size:30px;

-----------------------------
And then I got rid of this code cause I don’t need it:

.item h3 {
  color: #0059dd;
  line-height: 1;
  font-size: 30px;
  font-weight: bold;
}

---------------------------------------------

This is now the updated CSS

.item1 {
    padding-top: 0px; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
}

.item2 {
   padding-top: 0px; 
   padding-right: 50px; 
   padding-bottom: 0px; 
   padding-left: 50px;
}

.item-line {
  display: block;
  width: 300px;
  height: 24px;
  background-color: #E2AB58;
}

h3 {
color: #0059dd;
font-weight:bold; 
line-height:1;
font-size:30px;
margin:0;
}
14

Food for thought: (comparing ways of writing CSS)

.item1 {
    padding-top: 0; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
}

.item2 {
   padding-top: 0; 
   padding-right: 50px; 
   padding-bottom: 0; 
   padding-left: 50px;
}

The above CSS is the same as:

.item1,
.item2 {
    padding-top: 0; 
    padding-right: 50px; 
    padding-left: 50px;
}

.item1 {
   padding-bottom: 100px; 
}

.item2 {
   padding-bottom: 0; 
}

Which is more efficiently written like this:

.item1,
.item2 {
    padding-top: 0; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
}

.item2 {
   padding-bottom: 0; 
}

I am not suggesting that you need to change anything. Your CSS is correct. This is just FYI knowledge.

1 Like
15

I understand, that’s just another way of doing it. ok, I’ll remember that.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.