Отступ у текста span (Без него так же)

@JIeuTo · Регистрация: 31.05.2018

Author24 — интернет-сервис помощи студентам

Добрый день, подскажите пожалуйста, как мне убрать отступ сверху, так что бы вершина иконки, совпадала с вершиной текста

@AlexZaw · 31.05.2018, 14:13

Для иконки пропишите vertical-align: top; если не поможет - покажите код

@JIeuTo · 31.05.2018, 14:36 **[ТС]**

Не помогло, вот код

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Портфолио</title>
    <meta name="keywords" content="портфолио, ищу работу, работа">
    <meta name="description" content="Хочу найти себе хорошую работу, вот предаставляю свое портфолио">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="site-width">
        <img class="logo" src="img/logo.png" alt="Логотип" title="Логотип" align="middle">
        <img class="text" src="img/bistyle.png" alt="БиСтайл" title="БиСтайл">
        <ul>
            <li><img src="img/1.png" align="texttop" alt="1"><span>Портфолио</span></li>
            <li><img src="img/2.png" align="texttop" alt="2"><span>Twitter</span></li>
            <li><img src="img/3.png" align="texttop" alt="3"><span>Facebook</span></li>
            <li><img src="img/4.png" align="texttop" alt="4" ><span>Vk</span></li>
            <li><img src="img/5.png" align="texttop" alt="5"><span>Google+</span></li>
        </ul>
    </header>
    <section class="site-width">
        <section class="resume">
            <h1>Иванов Сергей Васильевич</h1>
            <div>
                <img src="img/face.png" alt="face" title="Лицо">
            </div>
        </section>
    </section>
    <footer class="site-width">
        
    </footer>
</body>
</html>

CSS

body {
    background: url(..//img/background.png) no-repeat fixed;
    background-size: cover;
    text-align: center;
    font-family: "Tahoma";
    margin: 0;
    padding: 0;
}
 
.site-width {
    width: 740px;
    margin: 0 auto;
}
 
header .logo {
    vertical-align: top;
    padding: 0;
    margin: 49px 0 0 0;
}
 
header .text {
    margin: 59px 0 0 0;
}
 
ul {
    margin-top: 65px;
    margin-bottom: 25px;
}
 
li {
    list-style-type: none;
    text-transform: uppercase;
    font-size: 16px;
    color: #ffffff;
    text-decoration: underline;
}
 
header ul {
    padding: 0;
    display: flex;
    justify-content: space-between;
}
 
header ul span {
    padding: 0 0 0 9px;
}
 
.resume {
    width: 100%;
    height: 827px;
    background-color: #F3F3F3;
    border-radius: 10px;
    box-shadow: 3px 4px 10px #000000;
}
 
.resume h1 {
    margin: 0;
    padding: 41px 0 0 70px;
    font-size: 24px;
    color: #0e4d66;
    text-align: left;
}
 
div {
    border: 1px solid black;
    width: 182px;
}

@AlexZaw · 31.05.2018, 15:26

Задайте для li line-height равный размеру шрифта и для header ul span vertical-align: top;
Кстати использование атрибута align осуждается спецификацией а texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0.

@JIeuTo · 31.05.2018, 16:06 **[ТС]**

Да, спасибо, попробовал, немного выше поднялась, но все равно эффекта которого я хочу получить, не получается

Вот код:

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Портфолио</title>
    <meta name="keywords" content="портфолио, ищу работу, работа">
    <meta name="description" content="Хочу найти себе хорошую работу, вот предаставляю свое портфолио">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="site-width">
        <img class="logo" src="img/logo.png" alt="Логотип" title="Логотип" align="middle">
        <img class="text" src="img/bistyle.png" alt="БиСтайл" title="БиСтайл">
        <ul>
            <li><img src="img/1.png" alt="1"><span>Портфолио</span></li>
            <li><img src="img/2.png" alt="2"><span>Twitter</span></li>
            <li><img src="img/3.png" alt="3"><span>Facebook</span></li>
            <li><img src="img/4.png" alt="4" ><span>Vk</span></li>
            <li><img src="img/5.png" alt="5"><span>Google+</span></li>
        </ul>
    </header>
    <section class="site-width">
        <section class="resume">
            <h1>Иванов Сергей Васильевич</h1>
            <div class="border">
                <img src="img/face.png" alt="face" title="Лицо">
            </div>
        </section>
    </section>
    <footer class="site-width">
        
    </footer>
</body>
</html>

CSS

body {
    background: url(..//img/background.png) no-repeat fixed;
    background-size: cover;
    text-align: center;
    font-family: "Tahoma";
    margin: 0;
    padding: 0;
}
 
.site-width {
    width: 740px;
    margin: 0 auto;
}
 
header .logo {
    vertical-align: top;
    padding: 0;
    margin: 49px 0 0 0;
}
 
header .text {
    margin: 59px 0 0 0;
}
 
ul {
    margin-top: 65px;
    margin-bottom: 25px;
}
 
li {
    list-style-type: none;
    text-transform: uppercase;
    font-size: 16px;
    color: #ffffff;
    text-decoration: underline;
    line-height: 16px;
}
 
header ul {
    padding: 0;
    display: flex;
    justify-content: space-between;
    border: 1px solid black;
}
 
header ul span {
    padding: 0 0 0 9px;
    vertical-align: top;
    border: 1px solid black;
}
 
.resume {
    width: 100%;
    height: 827px;
    background-color: #F3F3F3;
    border-radius: 10px;
    box-shadow: 3px 4px 10px #000000;
}
 
.resume h1 {
    margin: 0;
    padding: 41px 0 0 70px;
    font-size: 24px;
    color: #0e4d66;
    text-align: left;
    text-shadow: #CFCFCF 1px 2px 1px ;
}
 
.border {
    border: 2px solid #1C85AF;
    width: 178px;
    height: 180px;
    padding: 4px 0 4px 0;
    margin: 29px 0 0 70px;
    border-radius: 5px;
}

@Raqwp · 31.05.2018, 16:46

Для li задать text-decoration:none и убрать border у span.

@JIeuTo · 01.06.2018, 09:31 **[ТС]**

Я border поставил span'у, для наглядности, так он у меня не стоит, а если ставлю text-decoration:none, соответственно убирается подчеркивание, но даже так все равно эффекта нет

@AlexZaw · 01.06.2018, 11:22

Скиньте архив странички вместе с картинками. С произвольными картинками я проверял способ который привел выше, все работало как вам нужно

@JIeuTo · 01.06.2018, 15:23 **[ТС]**

https://ru.files.fm/u/vw6n2w8z
Вот держите

@AlexZaw · 01.06.2018, 17:54

Архив поврежден

@JIeuTo · 01.06.2018, 18:14 **[ТС]**

https://ru.files.fm/u/gq7ga8eg
А так?

@AlexZaw · 01.06.2018, 19:18

header ul span {
position: relative;
top: -2.5px;
}

@JIeuTo · 01.06.2018, 20:18 **[ТС]**

Благодарю

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	01.06.2018, 19:18	12
	Сообщение было отмечено JIeuTo как решение Решение header ul span { position: relative; top: -2.5px; } 1

@JIeuTo 0 / 0 / 0 Регистрация: 31.05.2018 Сообщений: 104
		1
	Отступ у текста span (Без него так же) 31.05.2018, 13:55. Показов 12027. Ответов 12 Метки нет (Все метки) Добрый день, подскажите пожалуйста, как мне убрать отступ сверху, так что бы вершина иконки, совпадала с вершиной текста 0

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	31.05.2018, 14:13	2
	Для иконки пропишите `vertical-align: top;` если не поможет - покажите код 0

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	31.05.2018, 15:26	4
	Задайте для li `line-height` равный размеру шрифта и для header ul span `vertical-align: top;` Кстати использование атрибута align осуждается спецификацией а texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0. 0

@Raqwp 28 / 28 / 12 Регистрация: 30.03.2018 Сообщений: 129
	31.05.2018, 16:46	6
	Для li задать `text-decoration:none` и убрать `border` у span. 0

@JIeuTo 0 / 0 / 0 Регистрация: 31.05.2018 Сообщений: 104
	01.06.2018, 09:31 [ТС]	7
	Я border поставил span'у, для наглядности, так он у меня не стоит, а если ставлю text-decoration:none, соответственно убирается подчеркивание, но даже так все равно эффекта нет 0

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	01.06.2018, 11:22	8
	Скиньте архив странички вместе с картинками. С произвольными картинками я проверял способ который привел выше, все работало как вам нужно 0

@JIeuTo 0 / 0 / 0 Регистрация: 31.05.2018 Сообщений: 104
	01.06.2018, 15:23 [ТС]	9
	https://ru.files.fm/u/vw6n2w8z Вот держите 0

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	01.06.2018, 17:54	10
	Архив поврежден 0

@JIeuTo 0 / 0 / 0 Регистрация: 31.05.2018 Сообщений: 104
	01.06.2018, 18:14 [ТС]	11
	https://ru.files.fm/u/gq7ga8eg А так? 0

@JIeuTo 0 / 0 / 0 Регистрация: 31.05.2018 Сообщений: 104
	01.06.2018, 20:18 [ТС]	13
	Благодарю 0

Отступ у текста span (Без него так же)

Решение