Jak ustawić granicę dla znacznika div HTML

193

Próbuję zdefiniować ramkę wokół znacznika div w HTML. W niektórych przeglądarkach ramka się nie pojawia.

Oto mój kod HTML:

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

Jak ustawić ramkę dla znacznika div HTML?

RKh
źródło

Odpowiedzi:

360

Spróbuj wyrazić się jasno na temat wszystkich właściwości granic. Na przykład:

border:1px solid black;

Zobacz własność Stenografia graniczna . Chociaż inne bity są opcjonalne, niektóre przeglądarki nie ustawiają domyślnej szerokości lub koloru. W twoim przypadku założę się, że szerokość wynosi zero, chyba że określono inaczej.

Paolo
źródło
1
Musiałem usunąć sufiks „px”.
samis,
1
@samis To nie jest to, co chcesz robić.
Joel
29

można używać

border-width:2px;
border-style:solid;
border-color:black;

lub jako skrót

border: 2px solid black
Yonks Somarl
źródło
17

Zgodnie z W3C:

Ponieważ początkowa wartość stylów obramowania to „brak”, żadne obramowania nie będą widoczne, chyba że zostanie ustawiony styl obramowania.

Innymi słowy, musisz ustawić styl ramki (np. solid), Aby ramka była wyświetlana. border:thinustawia tylko szerokość. Ponadto kolor będzie domyślnie taki sam jak kolor tekstu (który zwykle nie wygląda dobrze).

Polecam ustawienie wszystkich trzech stylów:

style="border: thin solid black"
DisgruntledGoat
źródło
5

Wydaje mi się, że tutaj właśnie wskazujesz ...

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

Dobrze. musi być napisane jakoborder-width:thin

Proszę przejść z linkiem (kliknij tutaj), aby sprawdzić różne rodzaje stylów obramowania

możesz także ustawić szerokość obramowania, pisząc szerokość w pikselach. (np. szerokość-obrzeża: 1px), minimalna szerokość to 1px.

InfantPro'Aravind ”
źródło
5

Możesz użyć:

border-style: solid;
border-width: thin;
border-color: #FFFFFF;

Możesz je jednak zmienić według własnego uznania.

Andoni Henderer
źródło
2

Musisz ustawić więcej pól niż tylko szerokość ramki. Styl zasadniczo umieszcza ramkę na stronie. Szerokość kontroluje grubość, a kolor określa kolor, który ma być obramowaniem.

border-style: solid; border-width:thin; border-color: #FFFFFF;
Jason Too Cool Webs
źródło
1

W bootstrap 4 możesz używać narzędzi granicznych .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style>
  .border-5 {
    border-width: 5px !important;
  }
</style>

<textarea class="border border-dark border-5">some content</textarea>

Penny Liu
źródło
0
 .centerImge {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height:50%;
    }
 <div>
 @foreach (var item in Model)
{
<span> <img src="@item.Thumbnail"  class="centerImge" /></span>
  <h3 style="text-align:center">  @item.CategoryName</h3>
}
 </div>
Muhammad Armaghan
źródło
-3
<style>
p{border: 1px solid red}
div{border: 5px solid blue}

Nazywaj mnie Ishmael.

Tylko nie dzwoń do mnie późno na obiad.

Nazywaj mnie Ishmael.

Tylko nie dzwoń do mnie późno na obiad.

Mosaab Labbi
źródło