Border длина css: html — CSS. Как задать border-width?

Теперь примените стиль к элементу « div », применив следующие свойства CSS:

. main-div{

высота: 150 пикселей;

ширина: 100 пикселей;

положение: относительное;

фон: #b3f00b;

}

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

• Сначала получите доступ к контейнеру с помощью класса « .main-div ».
• Добавленное свойство « height » определяет высоту контейнера div.
• Затем « ширина » определяет размер ширины элемента.
• Затем « position » определяет тип метода позиционирования, используемый для элемента. Например, мы использовали « относительно », чтобы изменить положение относительно себя и родительского элемента.
• После этого « фон » используется для установки фона для div.
Шаг 4: Установите нижнюю границу

Чтобы установить нижнюю границу div, CSS « ​​ граница-нижняя ”используется. Здесь первое значение указывает ширину границы, второе — стиль границы, а третье — цвет границы. Шаг 5: Ограничить левую границу

позиция: абсолютная;

верх: 50%;

снизу: 0;

}

В приведенном выше коде « #border-left » используется для доступа к элементу div для применения перечисленных ниже свойств:

• « border-left » — это сокращенное свойство, которое используется для установки левой границы элемента.
Свойство
• « top » вертикально выравнивает позиционируемый элемент.
• « нижний » используется для выравнивания нижнего края позиционируемого элемента.
Свойство
• « position » установлено как « absolute », чтобы зафиксировать положение контейнера.

Выход

Мы объяснили процедуру ограничения длины границы в CSS.

Заключение

Чтобы ограничить длину границы, сначала создайте вложенный div-контейнер с помощью тега «

». Затем получите доступ к нему, используя определенный класс или идентификатор, и примените свойства CSS для стиля. Затем CSS « border-bottom » используется для установки нижней границы элемента и «9Свойство 0007 border-left добавляет границу с левой стороны элемента. В этом руководстве объясняется, как ограничить длину границы с помощью CSS.

Об авторе

Sharqa Hameed

Я энтузиаст Linux, я люблю читать каждый блог Linux в Интернете. У меня есть степень магистра в области компьютерных наук, и я увлечен обучением и преподаванием.

Посмотреть все сообщения

Любой способ установить высоту границы? — HTML и CSS — Форумы SitePoint

Элли 23 февраля 2018 г., 7:29

#1

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

Мне удалось сделать все, кроме синей линии в виде рамки слева от текста.
Буду признателен за любую помощь. Спасибо.
Вот мой код. Я не включал код для стилей, так как у меня нет с ними проблем. Просто дайте мне знать, если стили тоже нужны.

 
     <тд>
          

                

                     
                     

                         
                                  <тд выравнивание = "центр">
                                       

                             

                                  
                             
                             

                                 
 
                             
                         
                      
                      
                      
                      

                          
                                  <тд выравнивание = "влево">
                                       
Некоторый текст заголовка
                                  <тд выравнивание = "влево">
                                       
Некоторый текст какой-то текст какой-то текст какой-то текст
                                  <тд выравнивание = "влево">
                                      Некоторая ссылка
 Луч. H  23 февраля 2018 г., 15:07 
 #2
 Элли:
 Мне удалось сделать все, кроме синей линии в виде рамки слева от текста.
 Привет, Элли, 
 Если вы хотите, чтобы граница следовала только за высотой текста, вы можете указать свой стиль границы во вложенной таблице  role="presentation" 
 


                              

                                  
 
                              
                              
 
                                  
                              
                              

                                 
 
                              
                              

                                  
                             
                              

                                  
 
                              
                              

                                  
                              
                              

                                  
 
                              
                          
                      
                     
                 
              
         
      
 

  
 Прокрутите вправо, чтобы увидеть, где я добавил его в ваши встроенные стили
 Ray.H  24 февраля 2018 г., 5:06 
 #4
 Эй, Элли, 
 Я вижу, что ты хочешь сделать сейчас, название твоей темы и изображение объясняют это. 
 Похоже, вы хотите установить определенную высоту границы в верхнем левом углу текста. Мой предыдущий ответ не относился к определенному росту.
 Добавление 

 
  с вложенным в него div, позволит вам создать рамку, которую вы можете стилизовать по своему усмотрению. Установите ширину и высоту div, затем цвет bg. Затем расположите его вертикально с верхним полем.
 td.border div {
   высота: 40 пикселей;
   ширина: 3px;
   поле сверху: 22px;
   фон:голубой;
}
 
 
 
 

 

     
 Это будет похоже на ваше изображение и позволит вам точно настроить его.
 Элли  26 февраля 2018 г., 2:38 
 #5
 Не работает, хотя может я что-то не так делаю. Но я понимаю логику, и это имеет смысл. Попробую еще поэкспериментировать и разобраться. Большое спасибо, Рэй.
 Луч.H  26 февраля 2018 г., 3:03 
 #6
 Элли:
 Не работает, хотя может я что-то не так делаю.
 Привет, Элли, 
 Я знаю, что ты пишешь это для электронной почты, что является причиной табличных и встроенных стилей. Я пошел дальше и использовал тип документа 4.01 Transitional, чтобы учесть и устаревшие атрибуты.
 Вот тестовая страница, с которой я работал, запустите этот код в своем браузере, и он должен соответствовать снимку экрана из моего последнего поста.
 border-div.html (3,3 КБ)
  w3.org/TR/html4/loose.dtd">

<голова>
  
  
  
<тип стиля="текст/CSS">
td.border div {
   высота: 40 пикселей;
   ширина: 3px;
   поле сверху: 22px;
   фон:голубой;
}


<тело>

    
                      <тд выравнивание = "центр">
                           
                      <тд выравнивание = "влево">
                           
Некоторый текст заголовка
                      <тд выравнивание = "влево">
                           
Некоторый текст какой-то текст какой-то текст какой-то текст
Некоторый текст какой-то текст какой-то текст какой-то текст
Некоторый текст какой-то текст какой-то текст какой-то текст
                      <тд выравнивание = "влево">
                          Некоторая ссылка
 4 лайка
 Элли  26 февраля 2018 г.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт