Как сделать отступ в html слева: Отступы и поля | htmlbook.ru

Leave a Comment / Html / By /

Как сделать отступ слева?

  • Главная
  • Вопросы

Здравствуйте. На уроке 2.2 Библиотека Bootstrap 4 делала все как Иван, но у меня почему-то на странице не было отступа слева и при подключении режима совместимости картинки не перестраивались, а наезжали друг на друга.https://yadi.sk/i/WQWArrVFjUsWvg https://yadi.sk/i/qxGXPtNuDwMDug

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>Bootstrap</title>
  </head>
  <body>
    
    <nav>
        <a href="#">Main page</a>
        <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span></span>
        </button>
      
        <div>
          <ul>
            <li>
              <a href="#">Home <span>(current)</span></a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div aria-labelledby="navbarDropdown">
                <a href="#">Action</a>
                <a href="#">Another action</a>
                <div></div>
                <a href="#">Something else here</a>
              </div>
            </li>
            <li>
              <a href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form>
            <input type="search" placeholder="Search" aria-label="Search">
            <button type="submit">Search</button>
          </form>
        </div>
      </nav>
    <div>
        <div>
            <div>
                <div>
                    <img src="https://cdn.
 
  pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
                    <div>
                        <h5>Card title</h5>
                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#">Go somewhere</a>
                     </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="https://cdn.pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
                    <div>
                        <h5>Card title</h5>
                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="https://cdn.
 
 pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
                    <div>
                        <h5>Card title</h5>
                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#">Go somewhere</a>
                    </div>
                </div>
            </div>
          </div>
         
          <div>
            <div>
                <div>
                    <img src="https://cdn.pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
                    <div>
                        <h5>Card title</h5>
                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#">Go somewhere</a>
                     </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="https://cdn.
 
 
 pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
                    <div>
                        <h5>Card title</h5>
                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <img src="https://cdn.pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
                    <div>
                        <h5>Card title</h5>
                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#">Go somewhere</a>
                    </div>
                </div>
            </div>
          </div>
          <div  data-ride="carousel">
            <div>
              <div>
                <img src="https://cdn.
  pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
              </div>
              <div>
                <img src="https://cdn.pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
              </div>
              <div>
                <img src="https://cdn.pixabay.com/photo/2020/06/11/13/56/lighthouse-5286823_1280.jpg" alt="...">
              </div>
            </div>
            <a href="#carouselExampleControls" role="button" data-slide="prev">
              <span aria-hidden="true"></span>
              <span>Previous</span>
            </a>
            <a href="#carouselExampleControls" role="button" data-slide="next">
              <span aria-hidden="true"></span>
              <span>Next</span>
            </a>
          </div>
      </div>
    <!-- Optional JavaScript --> 
    <!-- jQuery first, then Popper.
 
 
 js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Наталья Макарова

2 years ago

  • Активные
  • Старые
  • Голоса

Спасибо большое. Получилось, а игра — супер!!!

Наталья Макарова

2 years ago

проверьте пожалуйста написание классов допустим класс container, а у Вас написан класс conteiner так как Bootstrap имеет ряд зарезервированных названий классов верстка может отличаться от результата Ивана.

я так же рекомендую вам поиграть в увлекательную игру https://flexboxfroggy.com/#ru для понимания того как управлять элементами на странице с помощью флекс, так как Bootstrap это библиотека построенная на этом.

и еще вот тут тоже очень понятно все про флекс https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Alex B

2 years ago

2 ответов

Как сделать абзац и настроить отступы в Ворде

Умение быстро форматировать текст в программе Microsoft Word позволяет эффективно и легко работать с текстовыми документами. Структурированный текст красиво смотрится и проще читается. Один из основных параметров форматирования – это создание отступов от края страницы и редактирование абзацев.

Содержание

  1. Как создать и выделить абзац
  2. Как создать отступ слева
  3. С помощью табуляции
  4. Кнопками на главной панели
  5. Через контекстное меню
  6. С помощью линейки
  7. С помощью горячих клавиш
  8. Как сделать выступ слева
  9. С помощью контекстного меню абзаца
  10. С помощью контекстного меню списка
  11. Как создать отступ справа
  12. С помощью контекстного меню
  13. С помощью линейки
  14. Как настроить абзац по умолчанию
  15. Как создать стиль абзаца
  16. Как выровнять абзацы во всем документе
  17. Как сделать абзац в таблице
  18. Список горячих клавиш для управления абзацами

Как создать и выделить абзац

В Microsoft Word есть возможность делать и единичные абзацные отступы, и применить настройки абзацев ко всему тексту или выделенному фрагменту. В различных версиях программы порядок действий схож.

Для того чтобы напечатать текст с новой строки, тем самым создав абзац, необходимо нажать на клавиатуре клавишу Enter. После этого курсор переместится на новую строку.

Выделить абзац целиком можно следующими способами:

  • Поставьте курсор в начало строки перед первым словом. Нажмите и удерживайте левую кнопку мыши, одновременно перемещая её к концу фрагмента. Вы увидите, как текст выделяется голубым цветом.
  • Установите курсор мыши в любое место абзаца, который необходимо выделить. Затем быстро крикните 3 раза левой кнопкой мыши. После этого весь абзац выделится голубым цветом.

Чтобы текст не выглядел единым полотном, его необходимо отформатировать – создать в начале абзацев отступы (красные строки) или выступы. Разберемся, как это сделать.

Как создать отступ слева

Отступом в текстовых редакторах называют промежуток между написанным текстом и полями страницы. Сделать его можно различными способами, самый простой из которых – с помощью пробела. Однако такой метод не позволяет выровнять текст по всему документу. При внесении в файл изменений или открытии его на другом компьютере пробелы могут сместиться и оказаться не в тех местах, где должны быть.

Поэтому рассмотрим другие — правильные способы создания абзацных отступов слева.

С помощью табуляции

Единичный отступ проще всего сделать при помощи клавиши «TAB». Поставьте курсор перед текстом, который необходимо сдвинуть вправо, и нажмите «TAB». Вы увидите, как текст переместится на небольшое расстояние от левого края страницы.

Кнопками на главной панели

Еще один простой способ сделать отступ в тексте – воспользоваться меню в верхней части экрана. На вкладке «Главная» найдите кнопку «Увеличить отступ».

Для уменьшения отступа используйте соседнюю кнопку «Уменьшить отступ».

Через контекстное меню

Чтобы указать точное расстояние между левым краем и текстом, сделайте следующее:

  1. Выделите область текста для редактирования.
  2. Кликните правой кнопкой мыши и в появившемся окне выберите «Абзац».
  3. В разделе «Отступы и интервалы» найдите пункт «Отступ» и задайте значение в графе «Слева». Подтвердите действие, нажав на кнопку «ОК».

Обратите внимание: если указанное значение меньше нуля, текст сдвинется за поля страницы.

С помощью линейки

Это один из самых удобных и универсальных способов настройки положения абзацев, так как работает в любой версии Word. В верхней панели окна редактора есть инструмент «линейка», на которой расположены три ползунка. С их помощью регулируются длина строки и отступы. Ползунки, расположенные справа и слева снизу, отвечают за длину строки. Верхний левый ползунок регулирует отступ начала абзаца.

Для изменения отступа с помощью линейки выполните следующие действия:

  • На вкладке «Вид» в верхней части экрана поставьте галочку напротив окошка с надписью «Линейка».
  • Передвиньте нижний левый ползунок до нужного размера абзаца.
  • Для выделения красной строки передвиньте верхний левый ползунок вправо. После этого первая строка выделенного абзаца сместится ближе к центру.

С помощью горячих клавиш

Нажмите клавиши Ctrl + М и установите нужный отступ. Для отмены действия используйте сочетание клавиш Ctrl+Shift+M.

Как сделать выступ слева

Помимо отступов, в текстах Microsoft Word могут использоваться выступы — смещения текста в левую сторону относительно первоначального положения без изменения первой строки абзаца. Выступы обычно применяют в нумерованных и маркированных списках, а также в художественных работах и журнальных статьях. Существует несколько способов создания выступа слева.

С помощью контекстного меню абзаца

Это наиболее простой способ создания левого выступа заданной ширины. Порядок действий следующий:

  • Щелкните правой кнопкой мыши по тексту.
  • В появившемся окне кликните на «Абзац».
  • На вкладке «Отступы и интервалы» найдите раздел «Отступ», а в нём пункт «Особый». Поставьте значение «Выступ».
  • Задайте параметры вручную или используйте стрелочки.

С помощью контекстного меню списка

  • Выделите все строки в маркированном или нумерованном списке.
  • Кликните один раз правой кнопкой мыши.
  • Во открывшемся окне выберите пункты «Увеличить отступ» или «Уменьшить отступ».

После этого список сдвинется вправо или влево.

Как создать отступ справа

Настроить правый отступ также можно несколькими способами.

С помощью контекстного меню

Чтобы задать точное расстояние между правым краем листа и текстом выполните следующие действия:

  • Выделите область, которую необходимо отредактировать.
  • Нажмите на правую кнопку мыши и в появившемся окне выберите «Абзац».
  • В разделе «Отступы и интервалы» найдите пункт «Отступ» и задайте значение в графе «Справа».

Заданное значение может быть как положительным, так и отрицательным. При выборе отрицательного текст сдвинется за поля страницы.

С помощью линейки

Чтобы воспользоваться этим методом, выполните следующие действия:

  • Перейдите на вкладку «Вид» в верхнем меню экрана.
  • Поставьте галочку напротив окошка с надписью «Линейка», тем самым включив отображение над рабочей областью.
  • Выделите абзац для редактирования и передвиньте правый ползунок, изменяя длину строки.

Как настроить абзац по умолчанию

Чтобы создать определённый стиль абзацев по умолчанию, сделайте следующее:

  • Выделитe весь текст, нажав на клавиши Ctrl + A.
  • Кликните правой кнопкой мыши и в появившемся окне выберите «Абзац».
  • На вкладке «Отступы и интервалы» нажмите на кнопку «По умолчанию».
  • Задайте текущее положение абзацев для всего документа, поставив галочку напротив соответствующего пункта.

Как создать стиль абзаца

Настроить стили оформления текста и абзацев по своему вкусу можно следующим образом:

  • На вкладке «Главная» нажмите на значок «Панель Стилей».
  • В появившемся боковом меню выберите «Создать стиль».
  • Укажите нужные параметры и настройте форматирование текста.

Как выровнять абзацы во всем документе

При создании нового документа текст на странице выравнивается по левому краю. Чтобы изменить этот параметр, сделайте следующее:

  • Выделитe весь текст, нажав на клавиши Ctrl + A.
  • С помощью значков на верхней панели меню выберите выравнивание по центру, по правому краю или по ширине.

При оформлении официальных документов часто используют выравнивание по ширине. Это делает текст ровным с обеих сторон за счет изменения расстояний между словами.

Как сделать абзац в таблице

Порядок действий при изменении положения текста в ячейке таблицы следующий:

  • Выделите таблицу и нажмите правую кнопку мыши.
  • В появившемся окне нажмите на строку «Свойства таблицы».
  • В разделе «Таблица» нажмите кнопку «Параметры».
  • Задайте поля ячеек по умолчанию.

Список горячих клавиш для управления абзацами

Чтобы вам было проще работать с текстами в Word, используйте сочетания клавиш:

  • Ctrl+J – выровнять абзацы по ширине;
  • Ctrl+E – выровнять по центру;
  • Ctrl+R – выровнять по правому краю;
  • Ctrl+L – выровнять по левому краю;
  • Ctrl+M – добавить отступ слева;
  • Ctrl+Shift+M – удалить отступ слева;
  • Ctrl+Shift+S – отобразить панель задать «Применить стили».

html — CSS set li indent

Поиск в Google и поиск по переполнению стека не дал никаких результатов, которые я мог распознать, поэтому простите меня, если об этом спрашивали раньше…

У меня есть выпадающее главное меню, в основе которого лежат списки. . Проблема в том, что списки очень широкие, и они не имеют достаточного отступа при расширении. Итак, это моя проблема! Как увеличить размер отступа в списках с помощью CSS?

  • HTML
  • CSS

0

padding-left управляет отступом ul , а не margin-left .

Сравните: вот установка padding-left на 0 , обратите внимание, что все отступы исчезают.

 ул {
  отступ слева: 0;
} 
 <ул>
  
  • раздел а
    <ул>
      
  • один
    • 
      
  • два
    • 
      
  • три
    • 
    
  

<ул>
  
  • раздел б
    <ул>
      
  • один
    • 
      
  • два
    • 
      
  • три
    •

    и вот установка margin-left на 0px . Обратите внимание, что отступ НЕ меняет .

     ул {
  поле слева: 0;
} 
     <ул>
  
  • раздел а
    <ул>
      
  • один
    • 
      
  • два
    • 
      
  • три
    • 
    
  

<ул>
  
  • раздел б
    <ул>
      
  • один
    • 
      
  • два
    • 
      
  • три
    •

    1

    , чтобы сделать отступ в раскрывающемся меню ul , используйте

     /* Основной уровень */
ул {
  поле слева: 10px;
}
/* Второй уровень */
уль уль {
  поле слева: 15px;
}
/* Третий уровень */
ул уль уль {
  поле слева: 20px;
}
/* и так далее. .. */

    Вы также можете сделать отступ для li s и (если применимо) a s (или любых других элементов содержимого), каждый из которых имеет разные эффекты. Вы также можете использовать padding-left вместо margin-left , опять же в зависимости от желаемого эффекта.

    Обновление

    По умолчанию многие браузеры используют padding-left для установки начального отступа. Если вы хотите избавиться от этого, установите padding-left: 0px;

    Тем не менее, настройки margin-left и padding-left по-разному влияют на отступы списков. В частности: margin-left влияет на отступ снаружи границы элемента, тогда как padding-left влияет на интервал внутри границы элемента. (Узнайте больше о блочной модели CSS здесь)

    Параметр padding-left: 0; оставляет значки маркеров li висящими над краем границы элемента (по крайней мере, в Chrome), что может быть, а может и не быть тем, что вам нужно.

    Примеры padding-left и margin-left и как они могут работать вместе на ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

    2

    Также попробуйте:

     ул {
  позиция стиля списка: внутри;
}

    1

     ли {
    поле слева: 50px;
}

    или замените 50px на что хотите.

    1

    Я обнаружил, что выполнение этого в два относительно простых шага, похоже, работает достаточно хорошо. Первое определение css для ul устанавливает базовый отступ, который вы хотите для списка в целом. Второе определение устанавливает значение отступа для каждого вложенного элемента списка внутри него. В моем случае они одинаковы, но вы, очевидно, можете выбрать все, что хотите.

     ул {
    поле слева: 1.5em;
}
ул > ул {
    поле слева: 1.5em;
}

    Используя инструменты разработчика Chrome и просмотрев стили, примененные к элементу ul таблицей стилей пользовательского агента (на момент написания), стили по умолчанию в Chrome:

     ul {
    дисплей: блок;
    тип-стиля-списка: диск;
    начало блока поля: 1em;
    край-блок-конец: 1em;
    маржа-встроенное-начало: 0px;
    маржа встроенный конец: 0px;
    заполнение-встроенное-начало: 40px;
}

    Свойство padding-inline-start используется для установки отступа маркеров (и маркеров дочерних списков).

    CSS-свойство padding-inline-start определяет логическое встроенное начальное заполнение элемента, которое сопоставляется с физическим отступом в зависимости от режима записи элемента, направления и ориентации текста.

    (Другие свойства по умолчанию также могут помочь людям получить желаемый вид)

    Обратите внимание, что это упоминалось ранее в комментарии @preferred_anon к другому ответу, но я пропустил это, когда впервые искал, поэтому я добавил этот ответ.

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    как сделать отступ вывода html с помощью CSS

    Задавать вопрос

    спросил

    Изменено 7 лет, 9 месяцев назад

    Просмотрено 147 раз

    Я использую PHP для перебора массива и возврата результатов, каждый результат отображается вместе с некоторым html-кодом. Прямо сейчас, чтобы добиться отступа, я использую тег DIV и устанавливаю поля следующим образом:

    Для вывода 1:

    Для вывода 2:

    Проблема с этим методом установки полей для каждого вывода заключается в том, что он всегда зависит от критериев, но иногда критерии не совпадают, и отступ разрушается.

    Итак, есть ли другой способ использовать CSS или какой-либо другой способ увеличить отступ для каждого вывода вместо того, чтобы указывать фиксированный?

    Извините, если я недостаточно ясно выразился, но надеюсь, что вы понимаете, о чем я спрашиваю, в противном случае дайте мне знать, и я постараюсь уточнить еще кое-что.

    Вот пример кода:

     foreach ($data[0] as $data) {
    если ($данные == а) {
        echo "
    ";
    } иначе, если ($данные == б) {
        echo "
    ";
    } elseif ($data == c) {
        echo "
     png'>
    ";
    }
}
    • HTML
    • CSS

    2

    Вы можете добиться этого с помощью простых тегов списка HTML.

     

<голова>
<тип стиля="текст/CSS">
уль ли {
   стиль списка: нет;
   поля: 15px 0px;
}
охватывать {
   граница: 1px сплошная #000;
   отступ: 5px;
}


<тело>
 
    Вложенный список
     
<ул>
  
  • Молоко
    <ул>
    
  • Чай
    • 
        <ул>
            
  • Черный чай
    •

    URL-адрес ссылки на образец: http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_lists_nested Спасибо и с уважением,

    Вивек

    надеюсь, что эта работа для вас

     $a=0;
foreach ($data[0] как $data) {
 если ($данные == а) {
 echo "
    ";
} иначе, если ($данные == б) {
 echo "

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *