Проблемы с подвижным элементом CSS

Я хотел бы переместить элемент h1 немного вниз, но не перемещая весь блок div.Проблемы с подвижным элементом CSS

HTML код здесь:

<div class="mainblock"></div> 
<div class="under"><h1>Some text</h1></div>

правила CSS здесь:

.mainblock { 
    margin: 40px auto 0 auto; 
    width: 40%; 
    height: 250px; 
    background-color: cadetblue; 
} 

.under { 
    margin: 0 auto; 
    width: 40%; 
    height: 250px; 
    background-color: coral; 
} 
h1 { 
    text-align: center; 
    font: 40px/30px Tahoma,sans-serif; 
    font-weight: 900; 
    color: azure; 
/* Here I add some margin for H1 */ 
    margin-top: 20px; 
}

Как я могу двигаться только тег h1? Использование padding не подходит, потому что оно добавляет некоторое пространство, и если бы это была ссылка, она создала какое-то доступное для меня пространство, которое мне не нужно.

источник

2015-04-09 Vad Zelenin

ли 'Маржа-top' работают лучше, чем' padding' для вас? – fzzfzzfzz

@fzzfzzfzz Мне нужен тот же эффект для перемещения h1 вниз, но без создания над ним нового пространства –

Используйте position:relative на элементе h1, чтобы переместить его без его влияния на положение других элементов.

h1 { 
    position:relative; 
    top:20px; 
    text-align: center; 
    font: 40px/30px Tahoma,sans-serif; 
    font-weight: 900; 
    color: azure; 
    /* Here I add some margin for H1 */ 
    margin-top: 20px; 
}

источник

2015-04-10 05:37:00 jono

Вы можете перемещать его, добавив line-height

источник

2015-04-09 22:07:14

, но как я могу его перемещать вправо или влево? (И это вызывает тот же эффект, что и отступы (читайте об этом в моем вопросе)) –

Другая возможность добиться того, что вы хотите, используется позиционирование как так:

.under { 
margin: 0 auto; 
width: 40%; 
height: 250px; 
background-color: coral; 
position:relative; 
} 

h1 { 
text-align: center; 
font: 40px/30px Tahoma,sans-serif; 
font-weight: 900; 
color: azure; 
position:absolute; 
top: 20px; 
}

источник

2015-04-09 23:14:26 seguraMode

Да. Читайте об этом вчера. Хорошая идея, но добавление позиции: относительно h1 более подходит. –

Похоже padding-top делает то, что вы хотите, если ссылка находится внутри h1 тег.

HTML

<div class="mainblock"></div> 
<div class="under"><h1><a href="#">Some text</a></h1></div>

CSS

.mainblock { 
    margin: 40px auto 0 auto; 
    width: 40%; 
    height: 250px; 
    background-color: cadetblue; 
} 

.under { 
    margin: 0 auto; 
    width: 40%; 
    height: 250px; 
    background-color: coral; 
} 
h1 { 
    text-align: center; 
    font: 40px/30px Tahoma,sans-serif; 
    font-weight: 900; 
    color: azure; 

    /* replace margin-top with padding-top */ 
    padding-top: 20px; 
}

Вот скрипка ... Я изменил отступы от 20px до 60px, чтобы сделать его легче увидеть, что нет интерактивного пространства над текстом.

http://jsfiddle.net/htpb9bdk/

источник

2015-04-09 23:36:22 redbmk

Перед тем, как ответить на этот вопрос, прочитайте весь вопрос. – OfficialBAMM

@OfficialBAMM Какую часть я не читал; не могли бы вы быть более конкретными? Вы ссылаетесь на «Использование« padding »не подходит, потому что он добавляет некоторое пространство, и если бы это была ссылка, он создал какое-то доступное для чтения пространство, которое мне не нужно».? Потому что, если я понял, что правильно ОП говорит, что пробел над буквами считается частью ссылки, что неверно, если ссылка находится внутри 'h1'. – redbmk

Ох. Извините, этого не заметил. Ваше право, мое плохое. – OfficialBAMM

Обеспечить позицию: абсолютная родительскому и дочернему элементу попробовать это: http://jsfiddle.net/heuek2za/

.mainblock { 
    margin: 40px auto 0 auto; 
    width: 40%; 
    height: 250px; 
    background-color: cadetblue; 
    margin-left:28%; 

} 

.under { 
    margin: 0 auto; 
    position:absolute; 
    width: 40%; 
    height: 250px; 
    background-color: coral; 
    margin-left:27%; 
    margin-top:4%; 
} 
h1 { 
    text-align: center; 
    position:absolute; 
    font: 40px/30px Tahoma,sans-serif; 
    font-weight: 900; 
    color: azure; 
/* Here I add some margin for H1 */ 
    margin-top: 50%; 
}

источник

2015-04-10 03:01:12 Shelly

у нас были бы проблемы с div, использующими абсолютный этот путь. Но спасибо. –

Вы также можете применять float: left, ширину 100% к H1, что заставляет маржу работать. Новый CSS для h1 становится:

h1 { 
     color: azure; 
     float: left; 
     font: 900 40px/30px Tahoma,sans-serif; 
     margin-top: 20px; 
     position: relative; 
     text-align: center; 
     width: 100%; 
     }

источник

2015-04-10 06:07:47 user3770777

Проблемы с подвижным элементом CSS

ответ

Смежные вопросы